Roll Back GST for Persons With Disabilities

With the call from our beloved Javed Abidi, Global Chair DPI; Honorary Director, NCPEDP, on behalf of and for the well-being of persons with disabilities this article is posted. Maxability will share this article to all interested parties, email and tweet as much as possible to raise the voice of persons with disabilities. Please share this and create an impact to roll back GST for people with disabilities. 10 days more for the next GST meeting and to implementation.

As you are aware, the GST Council has proposed a levy of 5% GST on all items for persons with disabilities mentioned in list 32. Besides this, GST for the following items specifically has been levied as follows:

  • Braille Typewriters – 18%
  • Braille Paper – 12%
  • Braille Watches – 12%
  • Braillers – 5%
  • Carriages for disabled people – motorised or not – 5%
  • Cars for physically disabled persons – 18%

It is shocking to know that the Council has proposed to levy tax on assistive aids and appliances which are of absolute necessity for persons with disabilities! This very move by the Government infringes the recently passed Rights of Persons with Disabilities Act 2016 that provides for equal rights, opportunities and non-discrimination! It is also to be noted that all these items were earlier exempt from VAT and Customs Duty.

In view of the above, various disability groups have been registering strong protests for the withdrawal of the proposed tax on aids, appliances and assistive devices used by persons with disabilities through representations to not just the Finance Minister (FM) at the central government level but also, to the FMs of the States as well!

We were also quite hopeful that the GST Council would heed to these petitions and rollback or significantly reduce the proposed GST during their meeting on Sunday,18th June, 2017. However, this didn’t happen!

The Council deliberated on the tax rate for restaurants in five star hotels but, did not reduce (leave alone abolish) the tax on disability aids & appliances. What is even more absurd is that the Council has decided to levy a 18% tax on restaurants in five star hotels – the same as the tax fixed for Braille typewriters!

On what basis are these tax rates being fixed is beyond comprehension! But, all is not lost! The next meeting of the GST Council is scheduled for 30th June. We cannot let this opportunity slide.

We are therefore, making an urgent appeal to the entire Indian disability sector and all our well wishers and friends to join hands and flood the Prime Minister’s Office and the Finance Minister’s Office with urgent petitions! Please courier letters or send faxes or emails or just a Tweet and a Facebook post tagging the relevant people – PMO (@PMOIndia), Finance Minister (@arunjaitley), Ministry of Finance (@FinMinIndia), Arun Goyal, Additional Secretary, GST Council (@ArunGoyal59), DEPwD (@socialpwds), etc.

Let us together make both, the South Block and the North Block sit up and take notice. We need to go all guns blazing on this!

We look forward to your support on our campaign on ‘Rollback GST for Persons with Disabilities’ (#RollbackGST4PwDs)!

Updated 21.06.2017

GST: UPDATE AS ON 20.6.2017
The current position of GST on disability aids & appliances as of today is as follows:

  • GST on Braille Typewriters (Chapter 84:32) has been brought down from 18% to 5 %.
  • GST on Braille Watches (Chapter 91:1) and Braille Paper (Chapter 48:8) has been brought down from 12% to 5%.
  • GST on Orthopaedic appliances, including crutches, artificial parts of the body, hearing aids etc. (Chapter 90:9) is still at 12%.
  • Almost all the disability goods, for example Braille Typewriters, Braille Watches, Braille Paper and so on, GST is now at 5% (Chapter 90).
  • Only piece of good news is that Braille Books (Chapter 49:1) are at NIL tax. However, it defies logic as to how will we produce Braille Books when the Braille Paper is being taxed at 5%!!!
  • The Cars for Physically Disabled Persons (Chapter 87:1) are still at a whopping 18% GST.

Information is kind courtesy of Javed Abidi on Facebook. The game is not yet over. We need to keep pressure on government to bring GST at 0% on all assistive technologies and products used by persons with disabilities.

#rollbackGSTforPWDs

Updated on 22.06/2017

Related articles (Links navigates to external websites)

Accessibility Legal and Policy Update

The Education and Out Reach GroupExternal Website of W3C WAIExternal Website has published an update on the laws and policiesExternal Website governing accessibility and disability through-out the globe. This accessibility legal and policyExternal Website information is important for accessibility enthusiasts to understand and digest how the world is moving towards inclusive web. I have tried analyzing the phase in which digital accessibility is progressing through this article. Section 508 refresh in the US, EUWeb & mobile directiveExternal Website and Right to persons with disabilities Act 2016(PDF)External Website in India are few legal and policy updates worth noting. This is on the progressive side.

In this legal and policyExternal Website page, the laws, Mandatory policies, policies, and Procurement laws of 18 countries including few from European Union are updated. As I do a quick search on internet there are 247 countriesExternal Website in the world. I just want to leave the rest to be thought by the readers. I am not concerned about the statistics of the countries but deeply concerned about the people with disabilities who live in the country where the laws and policies are not in place. I am bothered about the people with disabilities who live in the countries where laws and policies are on books but not in reality. Is the globe moving positively in the phase it need to be?

Being in the digital accessibility space for nearly a decade now I have seen a massive change in the way people consume the content or the way people interact with the web. The mobile era has completely changed how people use digital content, web technologies are hitting the market faster than a new recipe, but the awareness, learning and implementation of accessibility is not moving in the phase it should be. The newer markup languages like HTML5 and accessibility technologies like WAI ARIA are bringing accessibility lives to many digital products but this cannot be fulfilled until the designers, content authors, developers and test engineers understand how important is it to provide accessible content. Most of these groups create accurately marked up and accessible digital content only when the laws or policies mandate them or when the vender / client pays for it.

So if governments make a policy mandate, do you think the digital content that is under the jurisdiction of the policy will be made accessible? The term Mandatory policy is defined as “Required accessibility goals or implementation that is not regulated by law”, At W3C WAI Web Accessibility Laws and PoliciesExternal Website page. As per this page Guidelines for Indian Government Websites (GIGW)External Website is a mandatory policy recommended in 2009, however a news article recently reveals that only 38 among 7000External Website government websites are accessible. So are the laws and policies sufficient to make digital space an inclusive one?

Being a passionate accessibility consultant and beneficiary of accessible digital content I on behalf of Maxability urge designers, content authors and developers to keep accessibility and the needs of persons with disabilities in mind while creating websites, mobile apps and other digital products. The governing bodies of the law and implementers of the policies must take digital accessibility as a critical aspect. We at Maxability are always open to contribute to an accessible digital world.

aria-current (State)

aria-current state is used to indicate the current item in a set of elements within a component or a widget or a set of related elements. The aria-current state is specifically important to inform the screen reader user about the difference when an element within a set of related elements is visually styled to indicate it is the current item in the set.

aria-current state is an enumerated type. The values that are allowed by the spec are given below and explained in detailed later.

  • aria-current=”page”
  • aria-current=”step”
  • aria-current=”location”
  • aria-current=”date”
  • aria-current=”time”

Any value other than the above specified value for aria-current should be treated as aria-current=”true” by assistive technologies. If the aria-current attribute is not provided or the value is an empty string then assistive technologies should treat it as aria-current=”false” which is a default value. Assistive technologies or user agents should not expose any state to the user when aria-current attribute is not specified or the value of aria-current is an empty string.

Authors should only mark one element in a set of elements as current with aria-current attribute. Authors should not use the aria-current attribute as a substitute for aria-selected in widgets where aria-selected has the same meaning. For example, in a tablist, aria-selected is used on a tab to indicate the currently-displayed tabpanel. On the other hand aria-selected and aria-current can be used to different elements in a same component. For example, In a calander aria-selected represents the date selected by the user where as aria-current indicates the current date.

Aria-current state used in roles

All the elements of base markup.

Values of aria-current State

Value Description
Page Represents the current page within a set of pages.
Step Represents the current step within a process.
Location Represents the current location within an environment or context.
Date Represents the current date within a collection of dates.
Time Represents the current time within a set of times.
True Represents the current item within a set.
False Default Does not represent the current item within a set.

Inclusive Design 24 #ID24 2017

When: June 9, 2017.
Where: Live on YouTube via Google hangouts.

Inclusive Design 24 is a free 24-Hour online community event on accessibility. One hour sessions are hosted for full 24 hours on 9th June 2017. Inclusive Design 24 have webinars lined up for everyone from beginners to experienced, from executives to developers and the topics ranging from basics to advanced.

All the sessions will be live streamed on YouTube via Google hangouts. For questions during the webinar, Tweet them to @paciellogroup using the #ID24 hashtag

For the speakers and topic list visit Inclusive Design 24External Website

From team Maxability, we thank The Paciello GroupExternal Website for sponsoring this great event.

Nominations open for 8th NCPEDP-Mphasis Universal Design Awards

National Centre for Promotion of Employment for Disabled People (NCPEDP) is a non-profit voluntary organisation founded in 1996 working as an interface between various stakeholders – Government, Industry and Civil Society Organisations (both national and international) for the empowerment of persons with disabilities.

NCPEDP has long believed that accessibility is the bedrock of inclusion. However, it is not limited to just the physical space. It includes, among many others, transport infrastructure, information & technology, aids and appliances. Access therefore, is an issue that cuts across disabilities, sectors, abilities and age groups and forms the very basis of Empowerment! And, a concept that is intrinsic to any kind of access is ‘Universal Design’, which means a design that is usable to the greatest extent possible by everyone, regardless of age, ability, or situation.

Thus, to recognise exemplary and innovative work towards the cause of accessibility that promotes the principles of Universal Design, NCPEDP with the support of Mphasis launched the ‘NCPEDP-Mphasis Universal Design Awards’ in 2010.

2017 will see the eighth edition of the Awards which are given in 3 categories: Persons with Disabilities, Working Professionals, and Companies/Organisations. The Awards cover accessibility in the following fields:

  1. Built Environment
  2. Transport
  3. Information and Communication Technology
  4. Services
  5. Aids and Appliances

We have been tremendously motivated by the huge response that the Awards have received since it’s inception and this year, we look forward to seeing an even greater excitement!

 

The Concept Note along with the Nomination Forms can be found at NCPEDPExternal Website . We have also enclosed last year’s commemorative brochure for your reference.

We would appreciate if you could please nominate deserving candidates and also help us disseminate the documents further to relevant individuals/organisations in your mailing lists. The last date for sending nominations is Wednesday, 31st May, 2017.  Please send us your nominations at
secretariat.ncpedp@gmail.com.

More details and registration process can be found at NCPEDPExternal Website

Note: The last date for nomination submission is 31st May 2017.

Global Accessibility Awareness Day GAAD 2017

The 6th edition of Global Accessibility Awareness Day GAAD 2017 is on May 18th. GAAD is marked on third Thursday in May every year. It’s interesting to see the world talking about accessibility and experiencing the problems arising due to inaccessible digital content, and software products. GAAD is also an opertunity for each one of us to understand the problems faced by persons with disabilities. Awareness towards accessibility and sensitivity towards disabilities are the primary objectives of global accessibility awareness day (GAAD). These are the primary objectives for Maxability too and hence we promote GAAD through our blog.

Attend a global accessibility awareness day GAAD 2017 event in your city. Check the list of citiesExternal Website that conduct GAAD 2017. Many companies plan to have an awareness campaigns internal to their organization. Reachout to HR, Diversity & Inclusion or accessibility teams within your organizations to know more.

No GAAD 2017 events in your city? Your company is not aware of GAAD 2017? Don’t worry, We have some ideas for you. See below how to create awareness yourself and encourage teams around you.

Simple checks to observe accessibility

  • Can a user with wheel chair comfortably reach your work station from the main entrance?
  • Write the sentence “Today is Global Accessibility Awareness Day” on Facebook and post it to public. Wait!!! do this just with keyboard. Some computer users cannot use mouse.
  • Try calling a friend from your smart phone, the challenge is do it in sunlight. This is how low vision users experience the digital content
  • Watch videoExternal Website, just watch it, close your years, experience the difficulty faced by deaf or hard-of-hearing users.
  • If you own a website or a developer/ QA engineer do these simple checks on your websites. It just takes 10 minutes

Global Accessibility Awareness Day GAAD 2017 events in India

Deque Software Pvt Ltd at Hyderabad

WHEN: 18 MAY 2017

02:00 PM to 7:00 PM
WHERE:
T-HUB CATALYST BUILDING
IIIT-H Campus, Gachibowli
Hyderabad- India
Phone: 9652129697
Registration and informationExternal Website

Mitra Jyothi, Prakat Solutions and CIS at Bangalore

When: May 18th, From 2: 00 pm to 7: 00 p.m
Where:
NIMHANS Convention Centre
Hosur Road

Lakkasandra, Behind Bus Stop

Bengaluru, KARNATAKA 560029

Registration and informationExternal Website

GAAD 2017 celebrations by Paypal at Bangalore

When: May 18th, From 10: 00 am to 1: 00 p.m
Where:
PayPal India Pvt. Ltd.
8th Floor, Tower 11, Pritech Park SEZ
RMZ Eco Space Campus, Bellandur, Outer Ring Road
Bengaluru, Karnataka 560103

Registration and other detailsExternal Website

GAAD 2017 by Aubergine Solutions Pvt. Ltd at Ahmedabad

On May 19th, between 5.30 pm and 6.30 pm on basics of web accessibility. Details on GAAD 2017 at AhmedabadExternal Website.

About Global Accessibility Awareness Day (GAAD)

ASP .NET Web Form Controls Accessibility

Couple of days ago one of my friends asked me if we can make asp.net form controls accessible. I said “YES” and explained how to make them accessible for user. So here I am penning down my thoughts on asp.net form controls.

In HTML, authors use <input> tag to create a text field or radio button or checkbox and <label> tag to provide a proper label for the input fields. The label and input fields are associated using ‘for’ and ‘id’ attributes. The value of ‘for’ attribute must be equal to value of ‘id’ attribute.

<label for=”firstname”>First Name</label><input type=”text” name=”fname” id=”firstname” />

Like HTML, ASP.NET has its own form controls for label and input elements. They are not same as those used in HTML. Let us see the asp.net equivalent tags for textbox, select drop down, check box and radio button.

 

Textbox:

The label and textbox in asp.net is written as

<asp:Label runat=”server”>First Name</asp:Label>
<asp:TextBox ID=”firstname” runat=”server” />

In asp.net, <asp:Label> will not support the conventional “for” attribute which is used to map the text fields. A property named “AssociatedControlID” is used for <asp:label> control. It is equivalent to “for” attribute in HTML. The value of “AssociatedControlID” must be equal to ID of text box.

<asp:Label AssociatedControlID=”firstname” runat=”server”>First Name</asp:Label>
<asp:TextBox ID=”firstname” runat=”server” />

The above asp.net code is converted into HTML when it is compiled and rendered in a browser. The “AssociatedControlID” attribute is converted to “for” attribute.

<label for=”firstname”>First Name</label>
<input type=”text” name=”firstname” id=”firstname” />

 

Note: If “AssociatedControlID” is not used, <asp:Label> is rendered as a <span> element instead of <label>.

<asp:Label runat=”server”>First Name</asp:Label> will be rendered as <span>First Name</span>

 

Checkbox & Radio button:

Unlike text field where explicit <asp:label> should be defined, it is not required to use <asp:label> explicitly for a checkbox and radio buttons in asp.net. Instead a property called “TEXT” has to be defined in checkbox tag and radio button.

<asp:CheckBox ID=”checkboxtest” text=”Web Accessibility” runat=”Server” />

It will be rendered as

<input id=”checkboxtest” type=”checkbox” name=”checkboxtest” /><label for=”checkboxtest”>Web Accessibility</label>

 

<asp:RadioButton ID=”radiobuttontest” GroupName=”web” text=”Web Accessibility” runat=”Server” />

It will be rendered as

<input id=”radiobuttontest” type=”radio” name=”web” value=”radiobuttontest” /><label for=”radiobuttontest”>Web Accessibility</label>

 

Fieldset:

To group the similar form fields, fieldset is used in HTML with a descriptive legend. Similarly in asp.net, “panel” is used to group the similar form elements.

<asp:Panel ID=”panelmain” runat=”server”>Form fields goes here</asp:Panel>
<asp:Panel> tag generates a <fieldset> tag enclosed in <div>.
<div id=”panelmain”><fieldset>Form fields goes here</fieldset></div>
To get a legend tag, a property names “GroupingText” has to be used for <asp:Panel> tag

<asp:Panel ID=”panelmain” runat=”server” GroupingText=”Sample grouping”>Form fields goes here</asp:Panel>

It is rendered as

<div id=”panelmain”>
<fieldset>
<legend>Sample Grouping</legend>
Form fields goes here
</fieldset>
</div>

 

References:

  1. Grouping related form elements
  2. Accessibility in ASP.NET External Website
  3. Form elements accessibility

User Experience Designs with Accessibility In Mind Part 2

Thank you for reading first of two part series on User experience designs with accessibility in mind. If you haven’t already read my previous post I recommend reading the first part.

Now as you have a basic understanding of different disabilities the impact they have on inclusive design, it is important to know the accessibility standards by W3C called Web Content Accessibility Guidelines WCAG 2.0External Website. Though WCAG 2.0 have more than 60 success criteria laid against 3 conformance levels (A, AA, AAA), W3C recommends only level A and level AA success criteria. Out of these there are only few success criteria that can be considered during the UX stage. You can find the relevant success criteria in the W3C Accessibility responsibility breakdownExternal Website page. Each success criteria that is considered during user experience stage are available in the table under Interaction design and usability.

Inclusive designExternal Website at Microsoft, Amazing information for designers to begin with and spend rest of the life designing products, websites and applications keeping accessibility in mind.

An excellent book authored by Derek Featherstone, Founder of Simply Accessible, Foundations of User experience and accessibilityExternal Website explains where does accessibility fits in the process of user experience.

The webinar by Rajesh Kalidindi, explains the design considerations for accessibility with real time examples. The session is very informative and impressive. It is definitely worth watching. Accessibility guide for UX professionals (webinar registration required)External Website

Fitting user experience designs into accessibility is a vast topic, however these resources will help user experience professionals understand and implement universally accessible and inclusive products, applications and websites. It is not only the WCAG guidelines to be considered but also the requirements of 20% people with disabilities who use your product, users who have age old difficulties, those who are not technology savvy and those who have language discomfort.

Other resources that are worth reading

Last updated on May 5, 2017

WAI ARIA 1.1 New Roles, states and properties

In last few years Maxability have published several articles on each WAI ARIA 1.0 roles, states and properties. W3C WAI ARIA Working Group have published a latest Candidate RecommendationExternal Website on October 27, 2016. According to this candidate recommendationExternal Website of WAI ARIA 1.1, new roles, states and properties are introduced. In addition the values of some properties are enhanced to meet the needs of more complex widgets. On the other hand efforts are put to enhance the mapping of land mark roles such as role=”form” to behave as a HTML form element which wasn’t mapped in WAI ARIA 1.0.

New Roles in WAI ARIA 1.1

The following new roles are introduced in WAI ARIA 1.1. Detailed explanation of each role will be published as different articles in coming months.

  • role=”cell”: A cell in a tabular container.
  • role=”feed”: A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.
  • role=”figure”: A perceivable section of content that typically contains a graphical document, images, code snippets, or example text.
  • role=”none”: An element whose implicit native role semantics will not be mapped to the accessibility API.
  • role=”searchbox”: A type of textbox intended for specifying search criteria.
  • role=”switch”: A type of checkbox that represents on/off values, as opposed to checked/unchecked values.
  • role=”table”: A section containing data arranged in rows and columns.
  • role=”term”: The term role is used to explicitly identify a word or phrase for which a definition has been provided by the author or is expected to be provided by the user.

New States and properties in WAI ARIA 1.1

The following new states and properties are introduced in WAI ARIA 1.1. Detailed explanation of each state or property will be published as different articles in coming months.

  • aria-colcount (property): Defines the total number of columns in a table, grid, or treegrid.
  • aria-colindex (property): Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.
  • aria-colspan (property): Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
  • aria-current (state): Indicates the element that represents the current item within a container or set of related elements.
  • aria-details (property): Identifies the element that provides a detailed, extended description for the object.
  • aria-errormessage (property): Identifies the element that provides an error message for the object.
  • aria-keyshortcuts (property): Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
  • aria-modal (property): Indicates whether an element is modal when displayed.
  • aria-placeholder (property): Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
  • aria-roledescription (property): Defines a human-readable, author-localized description for the role of an element.
  • Aaia-rowcount (property): Defines the total number of rows in a table, grid, or treegrid.
  • aria-rowindex (property): Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid.
  • aria-rowspan (property): Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

This article will be updated if the final WAI ARIA 1.1 spec makes any changes.

How to make focus indicator accessible

External Website

A focus indicator is a dotted or solid line present around the tab-able elements such as links, buttons, and form fields. While navigating the page through keyboard tab key, the focus indicator appears around elements when they receive keyboard focus. It helps users to visually determine which element has current keyboard focus. All major browsers like Firefox, Chrome, Internet Explorer and Safari shows a thin dotted or solid line around the elements when they receive the keyboard TAB focus. But the focus indicator look different in each of the browsers. For example, Internet explorer and Firefox shows a dotted line whereas Chrome shows a blue solid line. In this article lets discuss on why focus indicator is suppressed in a web page and how to make focus indicator accessible for user.

 

Benefits of Focus Indicator:

A visible focus indicator not only helps users with certain disabilities but also helps sighted users to know where the current keyboard focus is when navigating the page through keyboard alone.
Following are different groups who majorly get benefited with presence of focus indicator:
Motor – Users who cannot use mouse and completely rely upon keyboard to navigate the web page and access interactions present in it.
Visual – Users who have low vision use screen readers often and keyboard to navigate the web page.\
Cognitive – Users with memory limitations may lose the track they are working on.

 

CSS Outline property

What if we don’t like the default dotted focus indicator and want to create something fancy? Can an author or developer create a customized focus indicators for interactive elements? Yes, a customized focus indicator can be shown using “outline” which is a CSS property that draws a line around the elements.

 

When focus indicators are not visible?

The HTML elements are not rendered by browsers in the same way. Sometimes there would be mismatch in padding, margin for same elements when seen in different browsers. This behavior makes it difficult to achieve pixel perfect (maintain pixel to pixel accuracy as per visual design specifications) while developing a web page. Hence developers go for CSS reset style sheet which has a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

Sample code:
In the sample code, the css properties are set for few html elements in reset.css.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline : 0;
}

As per above sample code, developers uses css property outline: none for following reasons.

  1. A large focus indicator which sometimes occupies the entire row if developer provides an image inside an anchor tag.
  2. It is rarely misunderstood that the focus indicator occupies some space and breaks pixel perfection
  3. Developers assume there is not harm with presence of outline and does not think to remove it.

 

Impact on Accessibility:

But, due to the presence of outline: none, all browsers suppress the default focus indicator they generally show for all interactive elements making it inaccessible for certain users. Motor disability group users who rely on keyboard will not know where their current keyboard focus is and hence cannot activate the interactive elements precisely. Hence they may have to rely on someone to complete their task.

Remedy:

  1. Removing outline:

    A straight forward remedy is to remove the “outline: none” property from reset css file. By removing it from reset.css, browsers will show the default focus indicator for all interactive elements and makes it accessible for all users.

  2. Define separate styles:

    Instead of removing the outline: none property, define separate styles for anchor element. In the above code snippet, remove the anchor and define it separately without outline: none.

    Sample code:
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline : 0;
    }
    a{
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
    }

  3. CSS Pseudo classes:

    Pseudo class is used to define the special state of the element like hover (when user mouse over on an element), focus (when keyboard focus is on an element) or activates it.
    Instead of removing outline: none from reset css, use pseudo class: focus. Define the outline explicitly for anchor elements when they receive keyboard focus using “: focus” pseudo class.

    Sample code:
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0;
    }
    a: focus { outline: 1px dotted black }

    Here by default anchor element has outline: none property making browsers to suppress the default focus indicator. But as outline is explicitly define in :focus pseudo class, browsers will overwrite the outline:0 and shows dotted black focus indicator with width of 1px. Hence users will still know where the keyboard focus is when they navigate through TAB key

 

Conclusion:

As per 2.4.7 focus visible success criteria, any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. The presence of outline: none in reset.css or any of the css files makes browsers to suppress the default focus indicator around interactive elements thus arising accessibility problems. Authors or developers should not encourage using outline: none in CSS. If at all they have to use it, then pseudo classes must be used to make the focus indicator visible.