wcag2.0

Changing form to include a submit button for WCAG

℡╲_俬逩灬. 提交于 2019-12-11 03:59:32
问题 I currently have a form like so: <form action="#"> <select {if $isPostRequest}disabled="disabled" {/if}size="1" name="locale" onchange="location.href={if $languageToggleNoUser}'{$currentUrl|escape}{if strstr($currentUrl, '?')}&{else}?{/if}setLocale='+this.options[this.selectedIndex].value{else}('{url|escape:"javascript" page="user" op="setLocale" path="NEW_LOCALE" source=$smarty.server.REQUEST_URI}'.replace('NEW_LOCALE', this.options[this.selectedIndex].value)){/if}" class="selectMenu">{html

Combining a table and hierarchical list in HTML

◇◆丶佛笑我妖孽 提交于 2019-12-03 15:08:35
问题 I'm working to redesign a legacy toolset and I'm looking at how to better display some information both presentationally and semantically. The data hierarchically in nature but has properties that need to be readily visible to users. The desired layout is similar to below. Seq Item Name Min Max - Anything under here isn't shown 1 Identifier 1 1 (Required) 2 Name 1 1 2.1 First Name 1 1 2.2 Middle Name - - (Optional but unlimted) 2.3 Last Name 1 1 3 Age - 1 (Optional) At the moment this is one

Tables and Screen Readers

强颜欢笑 提交于 2019-12-02 00:16:18
I seem to be having troubles getting a screen reader to read simple tables. I have the HTML below: <table alt="Account Information"> <tr> <th scope='row'>Account Number:</th> <td>1111 1111 1111</td> <td>&nbsp&nbsp<td/> <th scope='row'>Reference Number:</th> <td>XXXX XXXX XXXX</td> </tr> </table> When the screen reader hits this table it says "Table. 0 Columns. 0 Rows." I have tried many examples online and tried to use that WCAG2.0 standards as a guide line, but it doesnt seem to work. I have also tried different table layouts and structures and still get the same result. I haven't run this

How to mark-up a button for WCAG 2.0 Compliance?

懵懂的女人 提交于 2019-12-01 20:26:33
In striving for WCAG 2.0 Compliance, I'm finding quite a bit of varied information regarding proper treatment of buttons, specifically what is required to consider the button accessible and compliant. What is the appropriate way to mark-up a <button> ? What attributes or combination do they need to have? My buttons fall into three categories: Buttons that have text that describes their intended action. (e.g. "Learn More" to launch a modal with more product information) Buttons that have text that does not describe their action. (e.g. "X" or text that titles a section of accordion content)

How to keep focus within modal dialog?

[亡魂溺海] 提交于 2019-11-29 10:45:21
I'm developing an app with Angular and Semantic-UI . The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move with "tabs" between elements of the page that lays under the modal. I have found some working examples, like the following: JQuery dialog: https://jqueryui.com/dialog/#modal-confirmation dialog HTML 5.1 element: https://demo.agektmr.com/dialog ARIA modal dialog example: http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html (that I have

How do I make Font Awesome WCAG 2.0 compatible?

五迷三道 提交于 2019-11-29 03:11:22
问题 If I have a site with a couple of font awesome icons on it, e.g. <i class="fa fa-fw fa-cloud "></i> And run this through the WCAG 2.0 validator I get the following error: Success Criteria 1.4.4 Resize text (AA) Check 117: i (italic) element used. Repair: Replace your i elements with em or strong. Error Line 185, Column 158: <i class="fa fa-fw fa-cloud"></i> I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their

Accessible toggle

浪尽此生 提交于 2019-11-28 13:05:18
We are redesigning our website and there are some concerns internally that accessibility affects the design element. A toggle mode was suggested. Our standard version would still be accessible with the exception of contrast ratio and larger font size, which would be made available when you toggle to accessible mode. Has anyone had any experience with this? WCAG 2.0 allows a conforming alternate version (under some conditions ): For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

How to keep focus within modal dialog?

喜夏-厌秋 提交于 2019-11-28 04:03:59
问题 I'm developing an app with Angular and Semantic-UI . The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move with "tabs" between elements of the page that lays under the modal. I have found some working examples, like the following: JQuery dialog: https://jqueryui.com/dialog/#modal-confirmation dialog HTML 5.1 element: https://demo.agektmr.com/dialog ARIA

Accessible toggle

让人想犯罪 __ 提交于 2019-11-27 07:32:51
问题 We are redesigning our website and there are some concerns internally that accessibility affects the design element. A toggle mode was suggested. Our standard version would still be accessible with the exception of contrast ratio and larger font size, which would be made available when you toggle to accessible mode. Has anyone had any experience with this? 回答1: WCAG 2.0 allows a conforming alternate version (under some conditions): For Level A conformance (the minimum level of conformance),