Re: [WSG] Re: WSG Digest (Re: [WSG] skip links)

2009-10-29 Thread ピエールランリラヴィン

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 (link 
rel=start href=http://www.mysite.com; title=Home Page /link 
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

2009-10-28 Thread ピエールランリラヴィン


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 (link 
rel=start href=http://www.mysite.com; title=Home Page /link 
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 wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org

*
WEB STANDARDS GROUP MAIL LIST DIGEST
*


From: designer desig...@gwelanmor-internet.co.uk
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
mailto: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

2009-10-08 Thread ピエールランリラヴィン
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 Сергей Кириченко tt.s...@gmail.com 
mailto:tt.s...@gmail.com


abandon all hopes, brother ))

2009/10/8 Bas V basby...@hotmail.com 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
mailto:memberh...@webstandardsgroup.org
***





-- 
С уважением

Кириченко Сергей
верстальщик
тел. +7 (904) 333-46-25
starhack.ru http://starhack.ru



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
mailto: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: