6/7/2015

The Accessibility Cheatsheet - bitsofco.de

bitsofco.de

THE ACCESSIBILITY CHEATSHEET Posted on 02 June 2015

We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG contain some very useful information, and so I decided to condense the very extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.

OVERVIEW The guidelines for accessible content have four overarching principles, each with more specific guidelines. You can click on the link to go to the relevant section of this article. 1 - “Perceivable” - Information and user interface components must be presentable to users in ways they can perceive. 1.1 - Text Alternatives 1.2 - Alternatives for Time-Based Media http://bitsofco.de/2015/the-accessibility-cheatsheet/

1/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

1.3 - Adaptable Content 1.4 - Distinguishable 2 - “Operable” - User interface components and navigation must be operable. 2.1 - Keyboard Accessible 2.2 - Enough Time 2.3 - Seizures 2.4 - Navigable 3 - “Understandable” - Information and the operation of user interface must be understandable. 3.1 - Readable 3.2 - Predictable 3.3 - Input Assistance 4 - “Robust” - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. 4.1 - Compatible

PRINCIPLE 1 - “PERCEIVABLE” 1.1 TEXT ALTERNATIVES

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose” Plain text is the optimal format for any piece of content. This is because it can be used in many different formats to suit individuals with different disabilities. Therefore, it is important to provide a plain text alternative format for all content that is informative, i.e. not just decorative. http://bitsofco.de/2015/the-accessibility-cheatsheet/

2/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

For images, use the alt attribute. The alternative text for an image should be as descriptive as possible, such that the same message is conveyed.

< im gs r c = " n e w s l e t t e r .g i f"al t =" Fr een ew sl et t er .Ge tfr eer eci pe s,ne ws,andmor e.L earnmor e."

For audio and video elements, provide text transcripts. You can use the track element to specify timed text tracks for these media elements.

< tr ac kk i n d = " s u b t i t l es|c ap t io ns|d es cr ip t io ns "sr c= "p at h/t o/ fi le. vtt"src lan g=""lab el=" "> < au di oc o n t r o l s > < so u r c es r c = " m y a u d io . ogg "t yp e= "a ud io /o gg " > < tr a c ks r c = " c a p t i o n_ e n.v tt "k in d= "c ap ti on s "sr cl an g= "e n"la be l= "En glis h"> < /a ud i o > < vi de op o s t e r = " m y v i d eo . png "c on tr ol s> < so u r c es r c = " m y v i d eo . mp4 "s rc la ng =" en "ty p e= "v id eo /m p4 "> < tr a c ks r c = " d e s c r i pt i on_ en . vt t"k in d= "d es c ri pt io ns "sr cl ang =" en "l abel ="En gli sh"> < tr a c ks r c = " d e s c r i pt i on_ de . vt t"k in d= "d es c ri pt io ns "sr cl ang =" de "l abel ="Ge rma n"> < /v id e o >

http://bitsofco.de/2015/the-accessibility-cheatsheet/

3/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

For user interface elements, use labels. Labels can be used to provide context for information that may be otherwise very clear visualy. For example, where you may have a primary and secondary navigation that is styled differently, you use aria-label to distinguish between them.

< di vr o l e = " n a v i g a t i o n"ari al ab el =" Pr im ar y" > < ul > < l i > . . . al i s toflin kshe re. .. < / ul > < /d iv > < di vr o l e = " n a v i g a t i o n"ari al ab el =" Se co nd ar y "> < ul > < l i > . . . al i s toflin kshe re. .. < /u l> < /d iv >

1.2 ALTERNATIVES FOR TIME-BASED MEDIA

“Provide alternatives for time-based media.” Time-based media (audio and video) can be especially difficult for individuals with hearing or vision difficulties. In addition to providing a plain text alternative, it may also be helpful to provide an alternative time-based media version. For example Sign language as part of a video file Alternative audio for video files Video file with sign language as alternative for audio files 1.3 ADAPTABLE CONTENT

“Create content that can be presented in different ways (for example simpler layout) without losing http://bitsofco.de/2015/the-accessibility-cheatsheet/

4/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

information or structure.” Write your HTML in a meaningful sequence. Your document should be readable and understandable without any CSS. Lay out your HTML the way the page is inteaded to be read and, where possible, make use of semantic markup.

< he ad e r > < h1 > S i t eT i t l e < / h 1 > < na v > < /h ea d e r > < ma in > < h1 > P a g eT i t l e < / h 1 > < h2 > P a g eS u b t i t l e < /h 2 > < p> L o r e mi p s u md o l orsita m et , co n se ct et ur a di pis cingeli t.Pauc amu tatvelplu ras ane; V id e ,q u a n t u m ,i n q ua m ,f al l ar e,T or qu at e.Ia mina lt er aphi lo so phi aep arte . < /m ai n > < fo ot e r > < /f oo t e r >

Meaningful information should not be conveyed solely via sensory characteristics. Sensory characteristics such as shape, size, visual location, orientation, or sound should not be the only way of conveying important information. If you want to convey that a button will delete content, for example, make sure that this is also written in text, as shown on the left. Do not rely solely on colour and icons, as shown on right. http://bitsofco.de/2015/the-accessibility-cheatsheet/

5/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

1.4 DISTINGUISHABLE

“Make it easier for users to see and hear content including separating foreground from background.” Contrast ratio of text to background should be at least 4.5:1, preferably 7:1. You can use Lea Verou’s app to find the contrast ratio of your site’s colours.

http://bitsofco.de/2015/the-accessibility-cheatsheet/

6/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Text should be easily resizable. Text should be resizable using the default browser mechanisms up to 200% without a loss of content or functionality.

http://bitsofco.de/2015/the-accessibility-cheatsheet/

7/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Use actual text instead of images of text. As mentioned before, plain text is the most accessible format to use. Therefore, it is counterintuitive to use images of text where plain text can be used. Control over audio media should be provided. If any audio is played on a web page, provide a mechanism for users to control it with pause/play buttons and volume controls independent of the system volume controls.

http://bitsofco.de/2015/the-accessibility-cheatsheet/

8/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

PRINCIPLE 2 - “OPERABLE” 2.1 KEYBOARD ACCESSIBLE

“Make all functionality available from a keyboard.” Many people are unable to navigate the web using a mouse. Therefore, all functionality should be operable through the standard keyboard interface without requiring specific timings for individual keys. Ensure all functional elements have a clear focus state. For people navigating a website using the tab key only, focus states are how they know their location on the page. You can use javascript to add keyboard accessibility to static elements if needed.

http://bitsofco.de/2015/the-accessibility-cheatsheet/

9/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Avoid keyboard traps. Tab through the content of your website from start to finish to ensure that the keyboard focus is not trapped on any of the content. 2.2 ENOUGH TIME

“Provide users enough time to read and use content.”

http://bitsofco.de/2015/the-accessibility-cheatsheet/

10/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Provide controls for timed content. For any interactions related to timing - including moving information, auto-updating, or page time-outs - you should implement at least one of the following safeguards Users can turn off the time limiit Users can adjust time limit to at least 10 times the length of the default setting Users is warned before time expires and given at least 20 seconds to extend the time limit with a simple action

2.3 SEIZURES

“Do not design content in a way that is known to cause seizures.” Flashing light should not occur more than three times per second. Or, the flash should be below the general flash and red flash thresholds. You can use photosensitive epilepsy analysis tools or flash tests to test your site if you are unsure. http://bitsofco.de/2015/the-accessibility-cheatsheet/

11/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

2.4 NAVIGABLE

“Provide ways to help users navigate, find content, and determine where they are.” Provide a link for users to skip to the page’s main content. One of the first links on every page of a website should include a link for users to bypass repeated blocks of content, such as the navigation. This is especially important for pages that have large, multi-layered navigation menus. The link itself does not need to be visible when out of focus. For example -

< he ad > < st y l e > # s k i p _ t o{ p o s i t i o n :f i x e d; l e f t :0 ; t o p :0 ; o p a c i t y :0 ; } # s k i p _ t o : f o c u s{ o p a c i t y :1 ; } < /s t y l e > < /h ea d > < bo dy > < ah r e f = " # m a i n _ c on t ent "i d= "s ki p_ to "> Sk i ptoM ai nCo nt ent < n a v >< !--Navigationslinkshere--> < d i vi d = " m a i n _ c o nt e nt" > http://bitsofco.de/2015/the-accessibility-cheatsheet/

12/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

< / d i v > < /b od y >

Titles should be meaningful. The title of the web page, as well as the page heading, section headings, and labels, should describe the topic or purpose of the page. Link purpose can be determined from link text. As far as is possible, the purpose of a link should be able to be determined from the text that is within the anchor tag itself.

Provide more than one way to locate a web page. The same page should be accessible by more than just one link on one page. For example, a site could have Complete site map on a single page Search function to access all content Navigation with links to all pages Provide information about the current location. It is useful to provide information about where the current page is in relation to the rest of the website. This can be achieved with any of the following Breadcrumbs Site map Highlighting the current location in navigation http://bitsofco.de/2015/the-accessibility-cheatsheet/

13/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Using the tag to specify the current page’s relationship to other pages

PRINCIPLE 3 - ‘UNDERSTANDABLE” 3.1 READABLE

“Make text content readable and understandable.” http://bitsofco.de/2015/the-accessibility-cheatsheet/

14/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Specify the language(s) of the page. Specify the language of the current page on the HTML element, and any languages of specific parts.

< ht mll a n g = " e n " >< !--LanguageofthepageisEnglish--> < he ad > < /h ea d > < bo dy > < h1 >P a g eT i t l e < / h 1 > < p> He a l t hg o t hA m e r i ca nAp pa r elq ui no a,j ea ns ho rt scr ayy oupr ob abl yha ven' th eardofthemSc hlit z o cc up ya c t u a l l yt o f ud i sti ll e ryd is ru ptl et t er pr es sfi xi e.Sl ow -c arbkey tarhel la,actu allyB u sh wi c ki r o n ys e m i o t ic sPo rt l an dre ad ym ad ep ho tob oo tht ax ide rm ypor kbe llysma llb atchtry -ha rdy r. T hu nd e r c a t sb l o gn o r mc o re,t o us le dAm er ic anAp pa re lar tpa rty .< /p >

< bl oc k q u o t el a n g = " d e "> D ad a c h t ed e rH e r rd a ran ,i hna usd emF ut t erz usc ha ff en , a be rd e rE s e lm e r k te ,da ßk ei ngu te rWi ndwe ht e,l ie ffo rt u ndm a c h t es i c ha u fd enWe gn ac hBr em en :d or t,m ei nt eer , k ön n t ee rj aS t a d t mu s ika ntwe rd en . < /b lo c k q u o t e > < p> He a l t hg o t hA m e r i ca nAp pa r elq ui no a,j ea ns ho rt scr ayy oupr ob abl yha ven' th eardofthemSc hlit z o cc up ya c t u a l l yt o f ud i sti ll e ryd is ru ptl et t er pr es sfi xi e.Sl ow -c arbkey tarhel la,actu allyB u sh wi c ki r o n ys e m i o t ic sPo rt l an dre ad ym ad ep ho tob oo tht ax ide rm ypor kbe llysma llb atchtry -ha rdy r. T hu nd e r c a t sb l o gn o r mc o re,t o us le dAm er ic anAp pa re lar tpa rty .< /p > http://bitsofco.de/2015/the-accessibility-cheatsheet/

15/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

< /b od y > < /h tm l >

Provide meanings of unusual words and pronunciations of difficult words. You can use the title attribute to provide the meaning of abbreviations and unusual words. For definitions, you can use the dl element to provide a definition list.

< ab brt i t l e = " A u s t i nRo c ks" >A u 5t 1Nr 0x x0 rz < p> Th a tw a sa< ah r e f= " #dhu m bl eb ra g" >h um bl eb ra g< /a >< /p > < dl > < dti d = " d h u m b l e b r ag " >Hu mb l eBr ag < dd > S u b t l yl e t t i n go t her sn owa bo uth owf a nt as ti cyo url ifei swhi leu nder cut ting i tw i t hab i to fs el f -ef fa c in ghu mo ror" w oei sme "gl os s.< /d d> < /d l>

Make content available at a lower secondary education reading level. Teenagers aged between 11-14 should be able to understand the content, even if specific terminology and concepts are new. 3.2 PREDICTABLE

http://bitsofco.de/2015/the-accessibility-cheatsheet/

16/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

“Make Web pages appear and operate in predictable ways.” Consistent navigation. Navigation elements should be repeated in a consistent way throughout the website. Consistent identification. Terminology and repeatable elements should appear consistently throughout the website. No unprovoked changes of context. Any changes of context should only happen on request by the user. Things like redirects, popups and other similar interactions should be communicated clearly beforehand.

< ht ml > < he a d > < t i t l e > T h eT u d o r s< / tit le > < m e t ah t t p e q u i v =" r efr es h "co nt en t= "0 ;U R L= 'h tt p: // th et udo rs .e xam ple. com/ '"> < /h e a d > < bo d y > < p > T h i sp a g eh a sm o vedt oa< ahr ef =" ht t p: // th et ud or s. exa mp le .co m/"> theT udo rs.e xamp le.c om Y o uw i l ln o wb ere d ire ct e dtot hen ews i te .< /p > < /b o d y > < /h tm l >

3.3 INPUT ASSISTANCE

“Help users avoid and correct mistakes”

http://bitsofco.de/2015/the-accessibility-cheatsheet/

17/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Provide labels and instructions - Provide labels or instructions for input elements. Where there is a commonly made error, provide suggestions that users can model their answers against.

Error messages in simple language. Errors made should be described to the user in plain, understandable text, not error codes.

http://bitsofco.de/2015/the-accessibility-cheatsheet/

18/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Error prevention. Where a user is submitting information, at least one of the following must be true The submission of information is reversible The answers is checked for errors and the user is given the opportunity to correct before submission. The user is given the opportunity to confirm the information before submission

PRINCIPLE 4 - “ROBUST” 4.1 COMPATIBLE

“Maximize compatibility with current and future user agents, including assistive technologies.” Write valid code. Ensure the compatibility of your HTML by making sure it passes validations checks. Some important things validation checks look for include http://bitsofco.de/2015/the-accessibility-cheatsheet/

19/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

Valid doctype (Learn more about doctype) Valid character encoding specified (Learn more about character encoding) Complete start and end tags No duplicate attributes, for examples IDs Specify the purpose of elements. Specify the name, role and value for user interface components where appropriate. For forms in particular, label s should be used where possible -

< fo rmi d = " s i g n u p f o r m "> < la b e lf o r = " n m " > N a me < /la be l > < in p u ti d = " n m "t y p e= " tex t"na me =" na me "va l ue =" "> < fi e l d s e t > < l e g e n d > W o u l dy o ul iket os ig nup ?< /l eg e nd > < i n p u ti d = " y e s "na m e=" re q ue st "va lu e= "y e s"t yp e= "r ad io ">Y es < i n p u ti d = " n o "n am e ="r eq u es t"v al ue =" no "t yp e= "r ad io ">N o < /f i e l d s e t > < bu t t o nt y p e = " s u b m it " >Su bm i t< /b ut to n> < /f or m >

Where the label cannot be used, you can use the title attribute instead -

< fo rmi d = " s e a r c h f o r m "> < in p u tt y p e = " t e x t "t i tle =" s it ese ar ch "na m e= "q ue ry "id =" q"va lu e=" "> < in p u tt y p e = " s u b m i t"val ue = "s ea rc h" > http://bitsofco.de/2015/the-accessibility-cheatsheet/

20/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

< /f or m >

aria-label can also be used to provide a label for a user interface element, where a label may not be present.

< di vi d = " b o x " > Th i si sap o p u pbo x . X < /d iv >

   If you would like to read more about this, you can read the Web Content Accessibility Guidelines Reference, which goes into a lot more detail about how you can meet all the requirements. I think the best thing that we can do is try to navigate the websites we create using only the mechanisms that people with disabilities use, such as screen readers. Doing this has really made me aware of things I should change on the sites I have made to make them easier to use.

ENJOY THE ARTICLE?  Share on Twitter

http://bitsofco.de/2015/the-accessibility-cheatsheet/

  LOOKING FOR MORE? More posts in "html" category More posts in "accessibility" category 21/23

6/7/2015

The Accessibility Cheatsheet - bitsofco.de

6 Comments

Bits of Code

⤤ Share

 Recommend 2

1 

Login

Sort by Best

Join the discussion… mrazzari



3 days ago

The "Would you like to sign up?" radio buttons example should use fieldset/legend, otherwise "Yes/No" are meaningless without context. (Examples in this H71 WCAG tech).

△ ▽

• Reply • Share ›

Ire Aderinokun

Mod > mrazzari • 3 days ago

Thanks for pointing this out, I will update the article

△ ▽ Martin Allien



• Reply • Share ›

4 days ago

Nice article, kudos! I'm glad that accessibility is promoted, as it is often left behind. We should really treat all the users the same.

△ ▽

• Reply • Share ›

Ire Aderinokun

Mod > Martin Allien • 4 days ago

Thanks! Yes, accessibility is too often an afterthought

△ ▽ adamleithp



• Reply • Share ›

4 days ago

I really enjoyed this! Thanks. I enjoyed your sample code as-well.

△ ▽

• Reply • Share ›

Ire Aderinokun

Mod > adamleithp • 4 days ago

Thank you :) http://bitsofco.de/2015/the-accessibility-cheatsheet/

22/23

Thank you :)

6/7/2015

△ ▽

The Accessibility Cheatsheet - bitsofco.de

• Reply • Share ›

WHAT'S THIS?

ALSO ON BITS OF CODE

Meta Charset

Tic Tac Toe

2 comments • 3 months ago

4 comments • 2 months ago

Ire Aderinokun — Thank you!

Ire Aderinokun — Thanks! Well Sudoku is different

because there is (typically) only one correct answer. The board is predetermined and the player is …

The Value of Blogging

Building a Designer News Clone

11 comments • 2 months ago

4 comments • 22 days ago



Ire Aderinokun — Yes his course was so valuable.

Ire Aderinokun — Actually Firebase has security rules

Thanks!

to prevent against this. You can make sure that any user can only vote once on a post, and pretty …

Subscribe

d

Add Disqus to your site



Privacy

Made with ❤ by Ire Aderinokun

http://bitsofco.de/2015/the-accessibility-cheatsheet/

23/23

the accessibility cheatsheet - GitHub

Jun 2, 2015 - 2 - “Operable” - User interface components and navigation must be ... Lay out your HTML the way the page is inteaded to be read and, where ...

714KB Sizes 8 Downloads 105 Views

Recommend Documents

markdown-cheatsheet-online.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Main menu.

markdown-cheatsheet-online.pdf
would otherwise have special meaning in Markdown's formaing syntax. Markdown provides backslash escapes for. the following characters: \ backslash. ` backtick. * asterisk. _ underscore. {} curly braces. [] square brackets. () parentheses. # hash mark

Accessibility plan.pdf
The school nurse visits regularly to monitor. vulnerable pupils. Access to the curriculum. All areas of the curriculum should be available to pupils regardless of their disability. Page 3 of 4. Accessibility plan.pdf. Accessibility plan.pdf. Open. Ex

2017-accessibility-cheatsheet.pdf
Ruler Mathematics. Protractor Mathematics. Page 3 of 4. 2017-accessibility-cheatsheet.pdf. 2017-accessibility-cheatsheet.pdf. Open. Extract. Open with. Sign In.

Masters cheatsheet - top 80.pdf
Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Masters cheatsheet - top 80.pdf. Masters cheatsheet - top 80.pdf.

Administrator Guide to Accessibility
Sep 1, 2012 - Apps for Business & Education. Administrator Guide to Accessibility. Google, Inc. 1600 Amphitheatre Parkway. Mountain View, CA 94043.

Diablo-3-cheatsheet-62-63.pdf
Doom Hammer. Dread Lance. Exorcist. Guru Staff. Heaven Hand. Hellion Crossbow. High Scabbard. Razorspikes. Revenant Bow. Rune Sword. Sacred Shield.

Revenue Harvest scores greater email accessibility ... .com.my
Business. Revenue Harvest is a payment solutions provider based in Kuala Lumpur, ... owing to the real time collaboration that Google's cloud services provide.

Assessing the accessibility of online learning
declared number of disabled students entering Higher Education over the last 10 ... (containing video, animation or sound) can be used as assistive technology.

The W3C Web Content Accessibility Guidelines - Research at Google
[2], became a W3C recommendation in December 2008. WCAG 2.0 was ... ally possible to make static HTML websites WCAG 1.0 AA conforming without.

Spatial information accessibility in South Australia from the Internet: a ...
2. Spatial information accessibility in South Australia from the Internet: a ..... 2.html. Australian spatial data directory. (Australia Govt). 2. 8. South Australia. 84.

Diablo-3-cheatsheet-62-63.pdf
Grand Chain. Grand Halberd. Heaven Strand. Impellor. Kurastian Asp. Massacre Axe. Mythical Staff. Oni Blade. Pallium. Phantom Bow. Piercer. Ring. Sagaris. Sanctified. Quiver. Slag Hammer. Sovereign. Greaves. Sovereign Helm. Sovereign Mail. Sovereign.