Re: [WSG] Re: WSG Digest (Re: [WSG] skip links)
David Hucklesby さんは書きました:
ピエールランリ・ラヴィン wrote:
Actually is not enough. Accesskey is a good way about the
accessibility, but it's not completed.
I didn't check the latest WCAG and the latest version of screen
readers but:
* Keyboards shortcuts depend from the UA (the specifications didn't
define it)
* Users may define preferences keys
* Most of the screen readers set the priorities to the website, so if
you use a key not defined by the user but already defined by the
browsers (like 'd'), you can private them from native functionalities
* A few screen readers like IBM Home Page Reader set the priorities
to the user so some accesskeys may be ignored in case of conflicts
* Exotic keys like \ ] ( most unused ) may not work.
So primary:
* Set in the head of html a bunch of primary links as link tag (rel="start" href="http://www.mysite.com"; title="Home Page" />rel="help" ...)
* At least a "skip to content" link on TOP of your page (means top of
the HTML page, not after iframe or ads or anything, just after the body.
I don't remember the book (maybe Mr Zeldmann), citing
http://www.jimthatcher.com/ (good example with focus only).
* an additional block of skipping links at the top of the page too,
like those defined by BBC - http://www.bbc.co.uk, great example too
of skip nav
* Then a block of visible links like help, select a skin typically
ideal to introduce stuffs like style switcher, etc..
* Use correctly the titles h1, h2, h3, h4, h5, h6
* Use tabindex. you can play with tags like div - a, setting a
tabindex and a title attribute
* And of course write the 'help page' about how using your site
Accessibility depends from the country too, but I think in Europe
most the countries are using the following accesskeys:
Key 0: list of accesskeys , may be defined in the accessibility /
help page.
Key 1: home page (key not working with IBM Home Page Reader)
Key 2: news
Key 3: sitemap
Key 4: form, for example search form
Key 5: FAQ, glossary, etc...
Key 6: help about using the website
Key 7: email contact
Key 8: copyrights, license, ...
Key 9: guestbook, feedback
So accesskeys are great but only one of the way to enhance the
accessibility.
Great french article:
http://openweb.eu.org/articles/accesskey_essai_non_transforme.
One of the famous trick in css then is to use .off-left {
position:absolute; left:-9px; } for example instead of
display:none, to set content outside of the screens but keep it
readable by screen readers.
~~~
A very informative post. Thank you.
FWIW If a "skip to main content" is visible, I tend to use it to bring
the main article to the top of the window. Please make the link
available to sighted users as well...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Thanks :-)
It makes sense to set it visible too but it's not easy.
Even now, unfortunately, most of the websites doing this are people who
care about great accessibility and/or usability.
You will deal with any people (clients - marketing - design) saying for
example:
"You don't understand me, the users of my website are teenagers who want
to subscribe for a plan and get a mobile",
Famous fact that 15-25 years old people don't really understand
interface, are all in good health, and 100% capabilities. (ironical)
What seems "Killing the user experience" for advanced users may not be
for the average people.
So I meant in the worst case, better to have hidden skip links that
nothing ;-) (From my point of view)
For your personal use, if you don't care about the design, there are
some fancy plugins like tidy read
http://www.tidyread.com/ which extracts the main article as text so you
won't need or complain about skip links ;-)
Available for Firefox and IE.
What is funny about link in the html head (
http://www.w3.org/TR/REC-html40/struct/links.html#h-12.3), i never found
how to use it natively with browsers. Can anyone provide informations
about that please ?
Regards
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Re: WSG Digest
Actually is not enough. Accesskey is a good way about the accessibility,
but it's not completed.
I didn't check the latest WCAG and the latest version of screen readers but:
* Keyboards shortcuts depend from the UA (the specifications didn't
define it)
* Users may define preferences keys
* Most of the screen readers set the priorities to the website, so if
you use a key not defined by the user but already defined by the
browsers (like 'd'), you can private them from native functionalities
* A few screen readers like IBM Home Page Reader set the priorities to
the user so some accesskeys may be ignored in case of conflicts
* Exotic keys like \ ] ( most unused ) may not work.
So primary:
* Set in the head of html a bunch of primary links as link tag (rel="start" href="http://www.mysite.com"; title="Home Page" />rel="help" ...)
* At least a "skip to content" link on TOP of your page (means top of
the HTML page, not after iframe or ads or anything, just after the body.
I don't remember the book (maybe Mr Zeldmann), citing
http://www.jimthatcher.com/ (good example with focus only).
* an additional block of skipping links at the top of the page too, like
those defined by BBC - http://www.bbc.co.uk, great example too of skip nav
* Then a block of visible links like help, select a skin typically ideal
to introduce stuffs like style switcher, etc..
* Use correctly the titles h1, h2, h3, h4, h5, h6
* Use tabindex. you can play with tags like div - a, setting a tabindex
and a title attribute
* And of course write the 'help page' about how using your site
Accessibility depends from the country too, but I think in Europe most
the countries are using the following accesskeys:
Key 0: list of accesskeys , may be defined in the accessibility / help page.
Key 1: home page (key not working with IBM Home Page Reader)
Key 2: news
Key 3: sitemap
Key 4: form, for example search form
Key 5: FAQ, glossary, etc...
Key 6: help about using the website
Key 7: email contact
Key 8: copyrights, license, ...
Key 9: guestbook, feedback
So accesskeys are great but only one of the way to enhance the
accessibility.
Great french article:
http://openweb.eu.org/articles/accesskey_essai_non_transforme.
One of the famous trick in css then is to use .off-left {
position:absolute; left:-9px; } for example instead of display:none,
to set content outside of the screens but keep it readable by screen
readers.
Cheers and enjoy ! ! !
Richard Mather さんは書きました:
Hi Bob,
According to Wikipedia, the UK Government recommends accesskey="s" for
skip nav:
http://en.wikipedia.org/wiki/Access_key#Use_of_standard_access_key_mappings
Rich
2009/10/29 mailto:wsg@webstandardsgroup.org>>
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: "designer" mailto:desig...@gwelanmor-internet.co.uk>>
Date: Wed, 28 Oct 2009 13:36:32 -
Subject: skip links
Can anyone point me to the best way of providing a 'skip nav'
procedure
which is invisible to sighted readers but is picked up by screen
readers? It seems a can of worms - I've searched and read about
it, but
(of course) it is impossible to find out which way is recommended by
real world web designers who have actually used a bullet-proof
approach.
I'd be really grateful . . .
Thanks,
Bob
**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] styling a select box
Actually it shouldn't be skinned even if we can access it through the
css. Moreover, possibilities are limited. You won't go far. You can just
take a look at
http://www.456bereastreet.com/lab/styling-form-controls-revisited/ to
understand that it's simply not possible.
Please tell me if I'm wrong, default form fields are native elements
from the browser, like the menu bar, the prev - next - button, etc... So
it's related to the OS and the user preferences (linux gtk - qt).
What we did at my previous work: "evangelizing". Make some screenshots,
talk with designers about the real possibilities, and with anyone
related to the management / sells / account to make them understand and
the client too that form fields depends from the OS and are not the
pixel to pixel design viewed on the jpeg - psd whatever.
Anyway, about cross-browsering, with css i sometimes use this: (I don't
say it's the right way)
input, select, textarea {
display: -/moz/-/inline/-/box/;
display: /inline/-block;
vertical-align: middle; /* Or baseline */
margin:0;
}
By reseting the margin and the display properties, the fields seem to
have the same expected behavior on every browser.
For the select, it's not cool because if you set a width, and
options'text are longer, it's cropped with some browsers (IE ?).
For the height, depending from the situation you have to play with
height and/or padding and/or line-height
Setting a solid border often deletes the additional borders ( little 3d
- shadows ).
I think it's better to not change the padding. (or take care with
checkbox - radio input )
Then take care because starting playing with background-color,
background-image or javascript or flash, you will simply start
unaccessibilizing some features and often degrading the user
experiences. There are some workarounds, nothing easy at the moment to
my mind.
To conclude everything depends from your case. (Web site, web
application, etc...) There are possibilities to perform a whole custom
select, but it's not the same development, it's not the same schedule,
it's not the same rendering, and PRIMARY it's not the same usability as
native select.
Cheers,
ピエールランリ
James Ducker さんは書きました:
You could just use a regular select, and then use javascript to find
it, strip it out, and replace it with your own uber-select.
Here's something along those lines:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
- James
2009/10/8 Сергей Кириченко >
abandon all hopes, brother ))
2009/10/8 Bas V mailto:basby...@hotmail.com>>
Regularly I run into problems with styling the select box...
I like to change the look of the select box button and put the
button (and the option text) on the left-hand side and have it
showing exactly the same in all modern browsers but I have not
much luck with that...
Applying more advanced css to the select box that works with
all modern browsers in the same way appears to be impossible.
Not much pretty styling can be done with the select box's
button without the use of often long and complicated scripts
or alternatively to replace the box with Flash..
Are there any examples of simple to apply css for customizing
the select box button?
Is it really that hard or am I overlooking something and am I
maybe looking in the wrong places?
I can use some help with this..
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
С уважением
Кириченко Сергей
верстальщик
тел. +7 (904) 333-46-25
starhack.ru
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
James Ducker
Web Developer
http://www.studioj.net.au
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstanda
