Skip to main content

We write about Digital Accessibility. This includes topics related accessibility news, accessibility events, accessibility techniques, reviews of websites and applications, tips related to accessibility and in simple words all possible things about digital accessibility.

Tagged as

GAAD

Heading Structure – Accessibility Tips

Right heading structure improves user experience and provide easy access to content. It’s essential to mark up using real HTML heading mark-up and not just styling as headings. Often times some developers make text bold, increase font size for headings instead using real HTML mark-up.

Why is it essential to use real heading mark-up?

  • When styles are turned off, they still have to look like headings
  • Screen readers such as NVDA, rely on mark-up to expose information to users. If headings are not marked-up using real HTML, they will be treated as plain text
  • When HTML heading attributes are used, screen reader users can skim read the content
  • Search engines look up for headings to retrieve relevant content to users

things to remember while designing headings

  • Ensure that heading levels are not skipped
  • Ensure that page must have at least one <h1>

Related WCAG Success Criteria

  • 1.3.1 Info & Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.4.1 Bypass Blocks A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  • 2.4.6 Headings and labels Headings and labels describe topic or purpose. (Level AA)
  • 2.4.10 Section headings – Section headings are used to organize the content. (Level AAA)

How to test?

  • Use WAVE by WebAIM and look for structured elements
  • If you are using NVDA screen reader, Press Insert + F7 which brings up elements dialog and look for Headings

Build structured contnet!

Accessibility Resources for Developers

While we add content to our a11y resources page, to mark Global Accessibility Awareness Day, here is a quick list of some cool resources for Developers.

Accessibility Review: HDFC NetBanking – Adding new Beneficiary

Today, let’s look at Add Beneficiary section of HDFC Bank.

Please note that this test has been carried out using Mozilla Firefox and NVDA a Free and Open Source Screen reader

On Home page, combo box that has NetBanking, Prepaid / Forex Card, Verified by Visa, Credit Cards, Forgot password, Register options does not get focused in tab order but available when using up arrow from Login graphic link.

Once “Login” is activated, a new window gets opened which actually handle rest of the transactions. It would be useful to inform user that “Login” link opens in a new window.

Below are list of issues identified through Add beneficiary page:

WCAG Check Point Issue Recommendation
1.3.1 Info and Relationships Label for Edit field to enter Customer ID is not programmatically associated with its visible label Associate input field with its visible using <for> and <id> attributes
1.1.1 Non-text elements (Active images) Retrieve customer ID image link has an empty alt value thus ignored by screen reader Replace empty alt value with appropriate alt text such as “Retrieve Customer ID” etc.,
1.3.1 Info and relationships Table mark up is used to control the layout; this render unnecessary layout information to screen reader users Use CSS to control layout. It’s easy from portal maintenance prospective too
1.3.1 Info and Relationships (forms) Screen that appears after providing customer ID has following form related issues:

  • Labels for “Customer ID”, “IPIN” edit boxes do not have programmatic association
  • Labels for “virtual keyboard” and “confirm Security access icon and message” check boxes do not have programmatic association.
Associate input elements with respective labels using <for> and <id> attributes
1.3.1 Info and relationships When user is logged in, default focus moves to Account summary; while this is acceptable for portal of this kind where user needs to know the account summary, it would be worth to add heading structure to prior navigation items such as main navigation and side bar navigation or marking up with ARIA roles would be helpful Either provide appropriate headings or use ARIA roles
2.4.7 Focus visible There is no visible focus indicator across the portal; thus users especially those with low vision or cognitive would not know where they are navigating through on the page Either provide a visible focus indicator or ensure browser’s default focus indicator is not override
4.1.2 Name, Role and Value Side navigation contents such as Accounts, Transact, Enquire etc., appears and functions like menus but marked up as links Add menu roles and also ensure state of menus viz. expanded / collapsed is exposed to assistive technologies
1.3.1 Info and Relationships (forms) None of the input fields have associated form labels Associated labels with respective input fields using <for> and <id> attributes
3.3.2 Error identification When form is submitted with no data, user has shown usual process information and not error validation result Show usual process information only when all required fields are filled in

This is not a complete review of the flow but should help HDFC as a first step to make their digital experience accessible.

This post is part of series of reviews to mark Global Accessibility Awareness Day

Accessibility Review: State Bank Secure OTP iOS App

Receiving One Time Password (OTP) via SMS is easy but causes huge inconvenience when user’s registered phone is unavailable or traveling abroad. To solve this problem, State Bank of India has introduced SB Secure OTP application and we did a quick review of SB Secure OTP app for iOS with VoiceOver. Here are some findings:

  • Login Screen is easy including focus management for “Forgot PIN” dialog”
  • It was easy to enter PIN and login
  • Using VoiceOver, focus does not get to Back button, Logout, Help and Settings
  • It was easy to access dialog when user enters wrong PIN

About VoiceOver
VoiceOver is a screen reader on iOS and OS X that reads the screen aloud. To turn ON VoiceOver on iOS, go to Settings -> General -> Accessibility -> VoiceOver -> Toggle

This brief review is series of accessibility reviews to mark Global Accessibility Awareness Day which will be marked on 19th May, 2016 and 3rd Thursday of May every year!

Raising awareness is rather important to build accessible world – Global Accessibility Awareness Day

Developers are awesome, designers are awesome too! Always willing and keen to put in an innovative effort and bring a wow experience to consumers; then why is that they don’t care about accessibility? If you think they don’t that’s wrong; They absolutely don’t see people with disabilities / elderly as their enemies and never intend to build something that does not work for all users. It’s just that most of them doesn’t know about these segment of user base. Because they must have never come across people with disabilities and do not know how they use technologies. Let’s be realistic, those of us working in Accessibility industry, each one has come to this industry either with an experience or for some, it’s need for own self. So raising awareness plays an important role to build inclusive experiences.

Thanks to and Joe Devon, who thought to create a platform to raise awareness on accessibility by marking 1 day every year as Global Accessibility Awareness Day. It all started in the year 2012 and initially it was celebrated on 9th May but to consider vacations in some regions, it was decided to have this day on every 3rd Thursday of the May.

There are bunch of events happening across the world – may they be in-person events or virtual events… So much energy is floating to bring in awareness about accessibility. Visit Events page on GAAD website to see what’s happening around you.

Do you think you are too late to the party and you wish, you were aware of this earlier so that you can plan something? No panic, you can still do something. Some quick ideas:

  • Are you an android / iOS user, enable accessibility options from your settings and use phone for about a few minutes using in-built screen readers. For android, it’s called talkback and for iOS, it’s called VoiceOver
  • Meet with your friends and start talking about accessibility of places around you; like if you are at work, see what are the barriers you see from an employee who uses a wheel chair prospective.

More ideas you will find on GAAD website. Wishing everyone a happy accessibility (a11y) day!

If you are tweeting about GAAD, do NOT forget to use hashtag #gaad. Let’s have it trending!

Accessibility Testing – how to motivate coworkers?

To mark Global Accessibility Awareness Day, throughout the day we will be posting a few articles that hopefully would inspire you to take yet another step towards including accessibility into product roadmap.

Often we hear that implementing accessibility is difficult, costs more money and so on. This is true if we think of accessibility post engineering the product, but if we think of accessibility right at the design stage, the cost would be minimal.

Testing is important for any product to have rich quality, it’s equally important to include accessibility testing as part of the recess. It would be great if testing is carried out by variety of users including people with disabilities, elderly etc., but to get started one can perform initial audit using web based tools like WAVE by WebAIM etc.,

If you are new to accessibility and would want to bring in a fun element, a fw things that you can do is grab your team into a room, run WAVE tool on the web page and show them the number of errors, secondly and this would be usually powerful that ask teams to use the web page / app only with keyboard (without mouse). Specially, it would be an eye opener, when they interact with modal dialog boxes, drop down menus etc., One more thing that you can do is install NVDA Screen reader and ask team members to interact with app by switching off the computer screen. This way folks realize the importance of accessibility and how people with different disabilities use the internet.

So on the occasion of this Global Accessibility Awareness Day, why not doing this along with your co-workers and send in your experience!

Global Accessibility Awareness Day – May 15th – some ideas to host!

Last year and year before, Global Accessibility Awareness Day was marked across the world and it was a huge success. Let’s get ready to mark this important day this year too! This is one event where you don’t have to worry about the size of event, may it be small or big; that’s fine. Here are some ideas and I’m sure you would have more ideas too! Would suggest do the below exercises on the websites you frequently use or on your own products.

  • Go mouse-less: Just for about half an hour to one hour, whatever you do on internet, do it by unplugging the mouse. This will give you understand about how users with limited hand movement will surf the internet.
  • Go screen-less: If you are using Windows PC, download & install NVDA Screen reader and turn off your monitor. This will give you an understanding of how users with vision impairment surf the internet. If you are a Mac user, just press CMD+F5 and this will turn ON Mac’s in-built VoiceOver screen reader. You can do this on your mobile / tablet too. For iOS, VoiceOver is the screen reader and for Android, TalkBack is the screen reader
  • Turn-off Audio: Watch a video or movie by turning off audio and this will give you an understanding about how people with hearing impairment miss out on entertainment / information when videos or movies does not have captions

Now some ideas how you can mark this auspicious event!

  • Gather your colleagues / friends and encore them to do above exercises
  • If you are a web developer, spend this day to fix only accessibility issues; at least a few hours
  • Create a road map to ensure accessibility of your product
  • Identify accessibility on the portals that you use often and report them to concerned team
  • Imagine you are a team of 100 developers and each one fix 5 accessibility issues, 500 issues are closed, what an impact!
  • Organize a sensitization talk to your employees

These are some ideas and you can do more. No matter big or small. You desire to mark this great day, but need help? do write to us at info(at)sgaccessibility(dot)com and we will help you!

Happy planning and we will write back another post after the event and would be happy to include any event that takes place at your place. Good luck.