WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessible crossword puzzle

for

Number of posts in this thread: 8 (In chronological order)

From: Mike Warner
Date: Fri, Aug 23 2024 4:14PM
Subject: accessible crossword puzzle
No previous message | Next message →

Hi all,

I'm revamping the accessibility of our crossword puzzle feature and was
wondering what the expected behavior of the tab and arrow keys would be.
Should the boxes for the letters be tabbable or just navigable via arrows?
Right now our current version uses the tab key to navigate the crossword
grid. The arrows don't have a behavior in the grid.

I found only one accessible crossword game built with html and javascript:
https://crossword.aphtech.org/?openWithUrl=http://select.nytimes.com/premium/xword/Apr0109.puz
Does that behave as you'd expect?

Thanks,
Mike

Mike Warner
Director of IT Services
MindEdge Learning

From: Birkir R. Gunnarsson
Date: Sat, Aug 24 2024 5:51PM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

In a grid, you do expect the arrow keys to navigate between cells and only
one cell in the grid to be focusable (so tab key navigates to and from the
grid).
If each grid cell is a letter you should probably implement spacebar press
to select/grab it and if one is already selected spacebar should drop it
(moving the existing letter to the next grid cell).
That being said, I haven't played a crossword puzzle in forever so not sure
how helpful that idea is.


On Fri, Aug 23, 2024 at 6:15 PM Mike Warner < = EMAIL ADDRESS REMOVED = > wrote:

> Hi all,
>
> I'm revamping the accessibility of our crossword puzzle feature and was
> wondering what the expected behavior of the tab and arrow keys would be.
> Should the boxes for the letters be tabbable or just navigable via arrows?
> Right now our current version uses the tab key to navigate the crossword
> grid. The arrows don't have a behavior in the grid.
>
> I found only one accessible crossword game built with html and javascript:
>
> https://crossword.aphtech.org/?openWithUrl=http://select.nytimes.com/premium/xword/Apr0109.puz
> Does that behave as you'd expect?
>
> Thanks,
> Mike
>
> Mike Warner
> Director of IT Services
> MindEdge Learning
> > > > >


--
Work hard. Have fun. Make history.

From: mhysnm1964
Date: Mon, Aug 26 2024 5:00AM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

My guidance here is to use the left and right arrow keys to move across the crossword and up and down arrows to move up and down the cells (letter edit fields) for the different questions. The tab and shift tab moves between the questions. The tricky bit is how do indicate with the tab key if you want to answer the questions which are across or down. Some programs I have seen on mobile set the layout only to answer questions in one direction. EG: A radio button is used to answer only the questions going across the page.

Thinking about it, you could use the arrow keys to navigate the whole crossword if the right level of information was presented to the screen reader and braille user and keyboard users. Scenario:

You have a cross word with 4 across and 4 going down questions. To keep things simple. The focus starts on Q1 going across. The right arrow is used. When ever there is an intersection with a question going down. The user is prompted for this fact. Saying something like Q1 down. A hot key could be available to announce the question or you could also ask it automatically. The user then could choose to use the down arrow key to follow that question until the next across question is found.

Visit this site for some ideas how a guy in Australia built one for windows. http://www.omninet.net.au/~irhumph/bgcrossword.htm

From: Lucy Greco
Date: Mon, Aug 26 2024 11:24AM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

hi i play an accessible crossword. The way it works is the word is an edit
field that the user drops into forms mode to file out and then can edit
that field. the arrow keys move from word to word. and the user can change
modes to across or down you could make across one tab panel and down the
other to make this work in html.
The one I use is not html but works great. it's the blind gamers one.
called bg crossword lucy


Berkeley IT <https://technology.berkeley.edu/home>

Lucy Greco, Web Accessibility Evangelist

Campus IT Experience
Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |

We champion diversity. We act with integrity. We deliver. We innovate.



On Mon, Aug 26, 2024 at 4:01 AM < = EMAIL ADDRESS REMOVED = > wrote:

> My guidance here is to use the left and right arrow keys to move across
> the crossword and up and down arrows to move up and down the cells (letter
> edit fields) for the different questions. The tab and shift tab moves
> between the questions. The tricky bit is how do indicate with the tab key
> if you want to answer the questions which are across or down. Some programs
> I have seen on mobile set the layout only to answer questions in one
> direction. EG: A radio button is used to answer only the questions going
> across the page.
>
> Thinking about it, you could use the arrow keys to navigate the whole
> crossword if the right level of information was presented to the screen
> reader and braille user and keyboard users. Scenario:
>
> You have a cross word with 4 across and 4 going down questions. To keep
> things simple. The focus starts on Q1 going across. The right arrow is
> used. When ever there is an intersection with a question going down. The
> user is prompted for this fact. Saying something like Q1 down. A hot key
> could be available to announce the question or you could also ask it
> automatically. The user then could choose to use the down arrow key to
> follow that question until the next across question is found.
>
> Visit this site for some ideas how a guy in Australia built one for
> windows. http://www.omninet.net.au/~irhumph/bgcrossword.htm
>

From: Dean.Vasile
Date: Mon, Aug 26 2024 11:28AM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

I am actually intrigued by this.
How does it read the words that are going vertically?
Dean Vasile


617-799-1162

> On Aug 26, 2024, at 1:25 PM, Lucy Greco via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>
> hi i play an accessible crossword. The way it works is the word is an edit
> field that the user drops into forms mode to file out and then can edit
> that field. the arrow keys move from word to word. and the user can change
> modes to across or down you could make across one tab panel and down the
> other to make this work in html.
> The one I use is not html but works great. it's the blind gamers one.
> called bg crossword lucy
>
>
> Berkeley IT <https://technology.berkeley.edu/home>
>
> Lucy Greco, Web Accessibility Evangelist
>
> Campus IT Experience
> Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |
>
> We champion diversity. We act with integrity. We deliver. We innovate.
>
>
>
>> On Mon, Aug 26, 2024 at 4:01 AM < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> My guidance here is to use the left and right arrow keys to move across
>> the crossword and up and down arrows to move up and down the cells (letter
>> edit fields) for the different questions. The tab and shift tab moves
>> between the questions. The tricky bit is how do indicate with the tab key
>> if you want to answer the questions which are across or down. Some programs
>> I have seen on mobile set the layout only to answer questions in one
>> direction. EG: A radio button is used to answer only the questions going
>> across the page.
>>
>> Thinking about it, you could use the arrow keys to navigate the whole
>> crossword if the right level of information was presented to the screen
>> reader and braille user and keyboard users. Scenario:
>>
>> You have a cross word with 4 across and 4 going down questions. To keep
>> things simple. The focus starts on Q1 going across. The right arrow is
>> used. When ever there is an intersection with a question going down. The
>> user is prompted for this fact. Saying something like Q1 down. A hot key
>> could be available to announce the question or you could also ask it
>> automatically. The user then could choose to use the down arrow key to
>> follow that question until the next across question is found.
>>
>> Visit this site for some ideas how a guy in Australia built one for
>> windows. http://www.omninet.net.au/~irhumph/bgcrossword.htm
>>

From: Lucy Greco
Date: Mon, Aug 26 2024 11:44AM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

hi it treats them as normal across words literally you change the mode to
down and then it rotates the grid so down is now acrss smile want me to
record a screen cast of it?


Berkeley IT <https://technology.berkeley.edu/home>

Lucy Greco, Web Accessibility Evangelist

Campus IT Experience
Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |

We champion diversity. We act with integrity. We deliver. We innovate.



On Mon, Aug 26, 2024 at 10:28 AM = EMAIL ADDRESS REMOVED = <
= EMAIL ADDRESS REMOVED = > wrote:

> I am actually intrigued by this.
> How does it read the words that are going vertically?
> Dean Vasile
>
>
> 617-799-1162
>
> > On Aug 26, 2024, at 1:25 PM, Lucy Greco via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
> >
> > hi i play an accessible crossword. The way it works is the word is an
> edit
> > field that the user drops into forms mode to file out and then can edit
> > that field. the arrow keys move from word to word. and the user can
> change
> > modes to across or down you could make across one tab panel and down the
> > other to make this work in html.
> > The one I use is not html but works great. it's the blind gamers one.
> > called bg crossword lucy
> >
> >
> > Berkeley IT <https://technology.berkeley.edu/home>
> >
> > Lucy Greco, Web Accessibility Evangelist
> >
> > Campus IT Experience
> > Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |
> >
> > We champion diversity. We act with integrity. We deliver. We innovate.
> >
> >
> >
> >> On Mon, Aug 26, 2024 at 4:01 AM < = EMAIL ADDRESS REMOVED = > wrote:
> >>
> >> My guidance here is to use the left and right arrow keys to move across
> >> the crossword and up and down arrows to move up and down the cells
> (letter
> >> edit fields) for the different questions. The tab and shift tab moves
> >> between the questions. The tricky bit is how do indicate with the tab
> key
> >> if you want to answer the questions which are across or down. Some
> programs
> >> I have seen on mobile set the layout only to answer questions in one
> >> direction. EG: A radio button is used to answer only the questions going
> >> across the page.
> >>
> >> Thinking about it, you could use the arrow keys to navigate the whole
> >> crossword if the right level of information was presented to the screen
> >> reader and braille user and keyboard users. Scenario:
> >>
> >> You have a cross word with 4 across and 4 going down questions. To keep
> >> things simple. The focus starts on Q1 going across. The right arrow is
> >> used. When ever there is an intersection with a question going down. The
> >> user is prompted for this fact. Saying something like Q1 down. A hot key
> >> could be available to announce the question or you could also ask it
> >> automatically. The user then could choose to use the down arrow key to
> >> follow that question until the next across question is found.
> >>
> >> Visit this site for some ideas how a guy in Australia built one for
> >> windows. http://www.omninet.net.au/~irhumph/bgcrossword.htm
> >>

From: Dean.Vasile
Date: Mon, Aug 26 2024 12:05PM
Subject: Re: accessible crossword puzzle
← Previous message | Next message →

If it wouldn’t be too much trouble, that would be fun to see.
Thank you very much for the offer
Dean Vasile


617-799-1162

> On Aug 26, 2024, at 1:45 PM, Lucy Greco via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>
> hi it treats them as normal across words literally you change the mode to
> down and then it rotates the grid so down is now acrss smile want me to
> record a screen cast of it?
>
>
> Berkeley IT <https://technology.berkeley.edu/home>
>
> Lucy Greco, Web Accessibility Evangelist
>
> Campus IT Experience
> Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |
>
> We champion diversity. We act with integrity. We deliver. We innovate.
>
>
>
>> On Mon, Aug 26, 2024 at 10:28 AM = EMAIL ADDRESS REMOVED = <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>
>> I am actually intrigued by this.
>> How does it read the words that are going vertically?
>> Dean Vasile
>>
>>
>> 617-799-1162
>>
>>> On Aug 26, 2024, at 1:25 PM, Lucy Greco via WebAIM-Forum <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> hi i play an accessible crossword. The way it works is the word is an
>> edit
>>> field that the user drops into forms mode to file out and then can edit
>>> that field. the arrow keys move from word to word. and the user can
>> change
>>> modes to across or down you could make across one tab panel and down the
>>> other to make this work in html.
>>> The one I use is not html but works great. it's the blind gamers one.
>>> called bg crossword lucy
>>>
>>>
>>> Berkeley IT <https://technology.berkeley.edu/home>
>>>
>>> Lucy Greco, Web Accessibility Evangelist
>>>
>>> Campus IT Experience
>>> Phone: (510) 289-6008 | Email: = EMAIL ADDRESS REMOVED = |
>>>
>>> We champion diversity. We act with integrity. We deliver. We innovate.
>>>
>>>
>>>
>>>> On Mon, Aug 26, 2024 at 4:01 AM < = EMAIL ADDRESS REMOVED = > wrote:
>>>>
>>>> My guidance here is to use the left and right arrow keys to move across
>>>> the crossword and up and down arrows to move up and down the cells
>> (letter
>>>> edit fields) for the different questions. The tab and shift tab moves
>>>> between the questions. The tricky bit is how do indicate with the tab
>> key
>>>> if you want to answer the questions which are across or down. Some
>> programs
>>>> I have seen on mobile set the layout only to answer questions in one
>>>> direction. EG: A radio button is used to answer only the questions going
>>>> across the page.
>>>>
>>>> Thinking about it, you could use the arrow keys to navigate the whole
>>>> crossword if the right level of information was presented to the screen
>>>> reader and braille user and keyboard users. Scenario:
>>>>
>>>> You have a cross word with 4 across and 4 going down questions. To keep
>>>> things simple. The focus starts on Q1 going across. The right arrow is
>>>> used. When ever there is an intersection with a question going down. The
>>>> user is prompted for this fact. Saying something like Q1 down. A hot key
>>>> could be available to announce the question or you could also ask it
>>>> automatically. The user then could choose to use the down arrow key to
>>>> follow that question until the next across question is found.
>>>>
>>>> Visit this site for some ideas how a guy in Australia built one for
>>>> windows. http://www.omninet.net.au/~irhumph/bgcrossword.htm
>>>>

From: Geethavani.Shamanna
Date: Tue, Aug 27 2024 7:02AM
Subject: Re: accessible crossword puzzle
← Previous message | No next message

The most accessible crossword puzzles I have come across are here:
https://crossword.aphtech.org/

Here the arrow keys are used for grid navigation. The tab key is used to access the across and down lists as well as the puzzle area and the puzzle combo box. And all these hotkeys work in the application mode. The whole thing is extremely accessible.

Geetha