accessibility - Enhancing the web user experience for the vision impaired -

-

i listening recent episode of hanselminutes scott hanselman discussing accessibility in web applications , got me thinking accessibility in own applications.

we understand importance of semantic markup in our web applications relates accessibility other simple enhancements can made improve user experience disabled users?

in episode, there number of times slapped forehead , said "of course! why haven't done that?" in particular, scott talked website placed hidden link @ top of web page said "skip main content". link visible people using screen readers , allows screen reader jump past menus , other secondary content. it's such obvious improvement yet it's easy not think of it.

there more accessibility , overall user experience creating valid xhtml , calling day.

what of simple tricks improving user experience vision impaired?

creating accessible pages hard think if have never done it. however, once learn basic concepts easy in 95% of cases. repeating others have said, but:

  1. only use tables tabular data
  2. make sure use semantic tools available via html. means using th scope attribute. use <em> instead of <i> , <strong> instead of <b>. use acronym , abbrev tags. use definition lists. can expand on these things if wishes.

  3. one of important things use label tag on input fields. every input field, radio button, checkbox , textinput should have:

    <label for="username">username:</label><input name="username" />

  4. add "skip navigation" or "skip navigation" depending on big chunks of text are. if working on government site should second nature you're creating allows skip repetitive information.

  5. do not use colors emphasis.

  6. ensure of text resizable. pretty means don't use "px" in css.

  7. i re-emphasize this: create semantic pages. use h tags titles. use ul/li navigation.

  8. use alt attribute on all images. if have spacer gif... well.. don't. otherwise, explain picture of , significance content associated with. don't use "a chart" alt tag. use "chart of ytd finances: $5,000 q1, $4,000 q2, $8,000 q3" or similar.

  9. provide closed captioning or transcripts audio , video components

the key here provide visual, hearing , motor impairments same experience standard physical capabilities. if can't tab field, screen reader can't either. if can't click on text next check box select it, screen reader doesn't know text related check box.

you should view site without stylesheets (ctrl-shift-s if have firefox , web developer toolbar) see if page makes sense. if doesn't make sense sighted individual, won't make sense using screen reader.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more