Website Accessibility Tips

1. Structure the DOM in a sensible way so that keyboard tab navigation is sequential.
2. Use HTML semantic elements like nav, header, section
3. Make sure parts of controls are grouped together
4. Use CSS for layout instead of tables
5. Use native HTML tags instead of divs and spans eg: a, button tags instead of div span with onclick coz divs and spans are not focusable.
6. Label form elements using 'label for'
7. Label images with alt attributes
8. Managing focus using element.focus() whenever required
9. For generic tags div and span, use Aria roles like role=button, role=menuitem so that screen readers can identify elements.
10. Aria landmark roles can be used to identify separate areas of the app. eg; <section role="search"/>
11. Use aria states to add dynamic information about the current state of an element
eg: <div tabindex="0" role="checkbox" aria-checked="true">
12. The property aria-live identifies dynamic content on a page. It is added to elements that will be updated and describes the types of updates the element receives.

Chromevox: chrome plugin to simulate screen reader.

Comments

Post a Comment

Popular posts from this blog

Responsive Web Design

Helps to make your content work across any device. Browser vieports are measured in Device Independent pixels (DIPs) and not the hardware pixels which are the actual physical pixels. Device pixel ratio: ratio of DIP to hardware pixel eg: device pixel ratio of 2 means one DIP for every 2 hardware pixels. Font boosting: Browsers try to identify the main content and boost the font size to ensure readability when the veiwport meta tag is not set. CSS pixel = Hardware pixel / DPR Setting meta viewport: <meta name="viewport" content="width=device-width,initial-scale=1" /> Set max-width on elements: img, embed, object, video{ max-width: 100%;} Tap target sizes: give a minimum size of 40px * 40px ideally 48px * 48xp (min-width and min-height) to cover the size of a finger. Start from small - mobile first approach: keep the content widths to 100% Media Queries: 2 ways to include media queries: 1. have separate CSS files and link them using med...
Read more

CSS Flexbox model

Flexbox ---------- Complex things like flexible grid layouts are so hard using tables, floats, inline-blocks. Flexbox consists of Flex containers and flex items. Flex container: display property set as flex or inline-flex. Flex Item: Every child of flex container. Everything outside a Flex Container and inside a Flex Item is rendered as usual. In short, Flexbox defines how Flex Items are laid out inside of Flex Containers. Flex Lines Flex Items are positioned inside a Flex Container along a Flex Line. By default there is only one Flex Line per Flex Container. The Main Axis and the Cross Axis To abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis. The names for the starting points, ending points, and directions of each axis are as follows: Main Start Main End Main Direction (sometimes called the Flow Direction) Cross Start Cross End Cr...
Read more