Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Accessibility problem, CSS does not enlarge radio buttons or checkbox

562 views
Skip to first unread message

bill

unread,
May 29, 2016, 2:10:25 PM5/29/16
to mozilla-sup...@lists.mozilla.org
My wife is visually limited and I am writing a shopping list app
for her. I want the text (and the buttons) to be 300% (or
thereabout).

I have tried this css:
------------------
<style type="text/css">
<!--
html { font-size: 1.5rem; }

button, select, input, textarea { font-size: 2rem; }

-->
</style>
----------------------

which enlarges everything except the radio buttons and checkboxes.

I added:

[type=checkbox], [type=radio] { width: 3rem; height: 3rem; }

and that increases the spacing around the buttons/checkboxes, but
does not increase the size of the button/checkbox.

Any suggestions ?

Win10: FF 46.0.1

and Android KitKat and whatever browser comes with that.

Good Guy

unread,
May 29, 2016, 2:36:08 PM5/29/16
to mozilla-sup...@lists.mozilla.org
are you creating a webpage?  If so then you need to use a class like so:

<style type="text/css" media="all">
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 200%;
    width: 500px;
}
</style>

And your html would look something like this:

<button class="button">
Large 200% on 500px width
</button>

Ron K.

unread,
May 29, 2016, 8:26:32 PM5/29/16
to mozilla-sup...@lists.mozilla.org
One problem your having is incorrect font size measurment units. Font
size unit is EM not REM. Invalid CSS is ignored.
--
Ron K.
Thunderbird user since May, 2003

Micky

unread,
May 29, 2016, 10:13:27 PM5/29/16
to mozilla-sup...@lists.mozilla.org
On Sun, 29 May 2016 14:09:46 -0400, bill <nob...@spamcop.net> wrote:

>My wife is visually limited and I am writing a shopping list app
>for her. I want the text (and the buttons) to be 300% (or
>thereabout).

I don't know code but if there ideas don't work, consider putting 3 or
6 identical buttons right next to each other.

Good Guy

unread,
May 29, 2016, 10:52:38 PM5/29/16
to mozilla-sup...@lists.mozilla.org
you mean like this (you need to view this in HTML):

Buttons, buttons and more buttons

Good Guy

unread,
May 29, 2016, 10:57:49 PM5/29/16
to mozilla-sup...@lists.mozilla.org
On 30/05/2016 03:12, Micky wrote:
The previous HTML post looks like this:


Buttons as an image

bill

unread,
May 30, 2016, 6:29:04 AM5/30/16
to mozilla-sup...@lists.mozilla.org
As I want the css to apply to all elements I use
<style type="text/css">
<!--
html { font-size: 1.5rem; }
button, select, input, textarea { font-size: 2rem; }
[type=checkbox], [type=radio] { width: 3rem; height: 3rem; }
-->
</style>

I was wrong in my initial post: this works for Android, just not FF.
bill

bill

unread,
May 30, 2016, 6:47:50 AM5/30/16
to mozilla-sup...@lists.mozilla.org
Thanks Ron, but rem is a valid css unit:
rem Relative to font-size of the root element
bill

WaltS48

unread,
May 30, 2016, 8:22:25 AM5/30/16
to mozilla-sup...@lists.mozilla.org
I don't think you can enlarge a radio button or checkbox.

I didn't look at all of the results when using "How to configure radio
and checkbox buttons for accessibility" (without quotes) as a search term.

<https://www.google.com/search?q=How+to+configure+radio+and+checkbox+buttons+for+accessibility&ie=utf-8&oe=utf-8>

One of the results recommends avoiding radio buttons.

<http://www.afb.org/info/accessibility/creating-accessible-websites/accessible-forms/235>


Mayayana

unread,
May 30, 2016, 10:33:56 AM5/30/16
to mozilla-sup...@lists.mozilla.org
There are different ways to do this. Personally
I like to keep as low-tech as possible, never using
newer CSS when older, better-supported will work.
That way I can be sure of support.
Here's how I'd do it. (Note the details of border
and background color. Those work well in IE as a
way to make the items more visible, but I haven't
found a way to make them work in FF. That's
surprising. Usually it's the other way around, with
FF supporting properties for all elenemts while IE
is usually more limited. You could possibly do something
using the newer before/after options, but I didn't try
that. (I've found the misuse of those so irritating that
I keep them disabled.)

-----------------------------------
<HTML>
<HEAD>
<STYLE>
* {font-family: verdana; font-size: 18px; line-height: 2.0;}
..opt1 {position: relative; width: 30px; height: 30px;
border-style: solid; border-width: 2px; border-color: #FF0000;
background-color: #FF00FF; margin: 5px;}
..ck1 {position: relative; width: 30px; height: 30px;
border-style: solid; border-width: 2px; border-color: #FF0000;
background-color: #FF00FF;}
</STYLE>
</HEAD>
Some text to show.<BR>

<INPUT CLASS="opt1" ID="op1" NAME="op1" VALUE="this" TYPE="radio">This
<INPUT CLASS="opt1" ID="op1" NAME="op1" VALUE="that" TYPE="radio">That
<BR><BR>
The other thing <INPUT CLASS="ck1" TYPE="checkbox">

</BODY></HTML>



bill

unread,
May 30, 2016, 10:34:39 AM5/30/16
to mozilla-sup...@lists.mozilla.org
adding

-moz-appearance:none;

to the css fixed the problem. Now the css reads:

<style type="text/css">
<!--
html { font-size: 2rem; }
button, select, input, textarea { font-size: 1.5rem; }
[type=checkbox], [type=radio] { width: 1.5rem; height: 1.5rem;
-moz-appearance:none;}
-->
</style>

and the checkboxes and radio buttons scale as desired

bill

Ron K.

unread,
May 30, 2016, 10:52:49 AM5/30/16
to mozilla-sup...@lists.mozilla.org
bill wrote on 5/30/2016 5:29 AM:
> On 5/29/2016 8:26 PM, Ron K. wrote:
>> bill wrote on 5/29/2016 1:09 PM:
>>> My wife is visually limited and I am writing a shopping list
>>> app for her.
>>> I want the text (and the buttons) to be 300% (or thereabout).
>>>
>>> I have tried this css:
>>> ------------------
>>> <style type="text/css">
>>> <!--
>>> html { font-size: 1.5rem; }
>>>
>>> button, select, input, textarea { font-size: 2rem; }
>>>
>>> -->
>>> </style>
>>> ----------------------
>>>

>>
>> One problem your having is incorrect font size measurment units.
>> Font size unit is EM not REM. Invalid CSS is ignored.
>
> Thanks Ron, but rem is a valid css unit:
> rem Relative to font-size of the root element
> bill
>
Well blow me down, my knowledge is dated.

Stormin' Norman

unread,
May 30, 2016, 11:15:09 AM5/30/16
to mozilla-sup...@lists.mozilla.org
On Sun, 29 May 2016 19:26:47 -0500, "Ron K." <nu...@serv2.dca1.giganews.com> wrote:


>
>One problem your having is incorrect font size measurment units. Font
>size unit is EM not REM. Invalid CSS is ignored.

Ron, CSS3 introduced the rem unit:

http://snook.ca/archives/html_and_css/font-size-with-rem

"Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to
sleep yet, then let's look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is
relative to the root熔r the html容lement. That means that we can define a single font size on the html element
and define all rem units to be a percentage of that.

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to
using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+,
and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when
defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn't implemented rem units yet.)

What do we do for browsers that don't support rem units? We can specify the fall-back using px, if you don't
mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still
page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again
using rem units.

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current
versions of all major browsers.

Dec 13, 2011: Opera 11.60 now supports the rem unit."

WaltS48

unread,
May 30, 2016, 11:25:45 AM5/30/16
to mozilla-sup...@lists.mozilla.org

Disregard my previous post, and wow those are Huge in my test HTML page.

Stormin' Norman

unread,
May 30, 2016, 11:33:48 AM5/30/16
to mozilla-sup...@lists.mozilla.org
Only by a couple of years.........

»Q«

unread,
May 30, 2016, 12:05:17 PM5/30/16
to mozilla-sup...@lists.mozilla.org
In <news:mailman.10.1464618877...@lists.mozilla.org>,
bill <nob...@spamcop.net> wrote:

> On 5/29/2016 2:09 PM, bill wrote:
> > My wife is visually limited and I am writing a shopping list app
> > for her. I want the text (and the buttons) to be 300% (or
> > thereabout).
> >
> > I have tried this css:
> > ------------------
> > <style type="text/css">
> > <!--
> > html { font-size: 1.5rem; }
> >
> > button, select, input, textarea { font-size: 2rem; }
> >
> > -->
> > </style>
> > ----------------------
> >
> > which enlarges everything except the radio buttons and checkboxes.
> >
> > I added:
> >
> > [type=checkbox], [type=radio] { width: 3rem; height: 3rem; }
> >
> > and that increases the spacing around the buttons/checkboxes, but
> > does not increase the size of the button/checkbox.
> >
> > Any suggestions ?
> >
> > Win10: FF 46.0.1
> >
> adding
>
> -moz-appearance:none;
>
> to the css fixed the problem.

I'm glad you found it, and that's the only thing that would work. For
reasons I don't understand, Firefox by default overrides styling
applied to buttons and checkboxes, and -moz-appearance:none is the only
way to prevent that.

Mayayana

unread,
May 30, 2016, 12:23:36 PM5/30/16
to mozilla-sup...@lists.mozilla.org
| I'm glad you found it, and that's the only thing that would work. For
| reasons I don't understand, Firefox by default overrides styling
| applied to buttons and checkboxes, and -moz-appearance:none is the only
| way to prevent that.

That's a very odd property. It's hard to see how
it might be useful in public webpages that have
to support various browsers.

In the sample I posted the color properties don't
show up in FF. If I add -moz-appearance:none; I
get a different look: The 3-D shadows disappear
and radio buttons checked are filled with a large
black circle rather than a small black circle or dot.
But the colors still don't show up.

So it seems that -moz-appearance:none; could
be an interesting way to customize the look of
some things, but only for -moz browsers and with
no apparent rhyme or reason.



WaltS48

unread,
May 30, 2016, 12:24:34 PM5/30/16
to mozilla-sup...@lists.mozilla.org
I've been going over a couple of tutorial sites and have yet to come
across "rem".

Maybe HTML Dog and the W3Schools sites need to update, or I just haven't
come across it.

Stormin' Norman

unread,
May 30, 2016, 12:36:12 PM5/30/16
to mozilla-sup...@lists.mozilla.org
Apparently, you over-looked it on W3Schools, see:

http://www.w3schools.com/cssref/css_units.asp

»Q«

unread,
May 30, 2016, 12:51:46 PM5/30/16
to mozilla-sup...@lists.mozilla.org
In <news:mailman.16.1464625414...@lists.mozilla.org>,
"Mayayana" <maya...@invalid.nospam> wrote:

> | I'm glad you found it, and that's the only thing that would work.
> For | reasons I don't understand, Firefox by default overrides styling
> | applied to buttons and checkboxes, and -moz-appearance:none is the
> only | way to prevent that.
>
> That's a very odd property. It's hard to see how
> it might be useful in public webpages that have
> to support various browsers.

It's not supposed to be used by web pages; if it's undesirable, it
really should be turned off with client-side styling (in Firefox, via
userContent.css or Stylish or another extension). bill's OP was about
an Android browser, which I know nothing about, so I didn't bring up
client-side fixes.

You might be interested in Mozilla's documentation of it, which also
covers -webkit-appearance,
<https://developer.mozilla.org/docs/Web/CSS/-moz-appearance>.

> In the sample I posted the color properties don't
> show up in FF. If I add -moz-appearance:none; I
> get a different look: The 3-D shadows disappear
> and radio buttons checked are filled with a large
> black circle rather than a small black circle or dot.
> But the colors still don't show up.

There's a way to override the colors, but unfortunately I can't recall
specifics; it's been a long time since I delved into this. I think
what needs overriding lives somewhere in
<resource://gre-resources/forms.css>. (Probably that URI must be copied
and pasted into the Fx address bar.)

Mayayana

unread,
May 30, 2016, 1:13:41 PM5/30/16
to mozilla-sup...@lists.mozilla.org
| You might be interested in Mozilla's documentation of it, which also
| covers -webkit-appearance,
| <https://developer.mozilla.org/docs/Web/CSS/-moz-appearance>.
|

Thanks. I didn't know about that one. Very limited
usefulness, but good to know.

Oddly, when I tried Bill's code I had no trouble with it.
It works fine for me using nothing more than:

<STYLE>
button, select, input, textarea
{ font-size: 2.5rem; width: 2.5rem; height: 2.5rem;}
</STYLE>

If I add the HMTL font-size line it also works fine
with that.



Mark Lloyd

unread,
May 30, 2016, 1:47:07 PM5/30/16
to mozilla-sup...@lists.mozilla.org
On 05/29/2016 07:26 PM, Ron K. wrote:

[snip]

> One problem your having is incorrect font size measurment units. Font
> size unit is EM not REM. Invalid CSS is ignored.

i was surprised, but rem IS a valid unit here. It stands for "root em".

--
Mark Lloyd
http://notstupid.us/

"When the gods wish to punish us, they answer our prayers." [Oscar
Wilde]

EE

unread,
May 30, 2016, 2:28:35 PM5/30/16
to mozilla-sup...@lists.mozilla.org
When I wanted buttons on web pages to change their appearance, I used
this code:
input[type="submit"] {
background-color: #b4eeb4 !important;
color: #000000 !important;
font-size: medium !important;
}

That changed the colours as well as the font size. You can change the
size to large or x-large to make it bigger. With buttons, you need to
specify the type.

WaltS48

unread,
May 30, 2016, 5:22:37 PM5/30/16
to mozilla-sup...@lists.mozilla.org

Was I the only that got Bill wanted to make radio buttons and checkbox larger.

Mayayana

unread,
May 30, 2016, 5:46:58 PM5/30/16
to mozilla-sup...@lists.mozilla.org
| > Oddly, when I tried Bill's code I had no trouble with it.
| > It works fine for me using nothing more than:
| >
| > <STYLE>
| > button, select, input, textarea
| > { font-size: 2.5rem; width: 2.5rem; height: 2.5rem;}
| > </STYLE>
| >
| > If I add the HMTL font-size line it also works fine
| > with that.
| >
| Was I the only that got Bill wanted to make radio buttons and
| checkboxlarger.
|

Did I misunderstand? The code I posted earlier makes
radio buttons and checkboxes larger. It's just vanilla
CSS that should work in any browser from the past
15 years. When I tried the style code above in FF it also
makes them larger. It makes them larger still with the
addition of Bill's code make all HTML larger. I didn't need
the addition of -moz-appearance:none; in either case.

I generally also use position: relative; because I once
read that position values like top, left, width, height
might be ignored if the position property is not used.
But it doesn't seem to be necessary here.

I have been wondering, though, if there's a mixup
between HTML files and userContent.css. I'm not
aware of [type=checkbox] being a valid selector in CSS.
It might be valid for userContent.css. But since bill
was using STYLE tags I assumed he was writing his
shopping list as a webpage with CSS and not trying
to customize all HTML on his wife's browser by editing
userContent.css. Are we actually having two different
discussions unwittingly?


»Q«

unread,
May 30, 2016, 7:56:56 PM5/30/16
to mozilla-sup...@lists.mozilla.org
In <news:mailman.26.1464644815...@lists.mozilla.org>,
"Mayayana" <maya...@invalid.nospam> wrote:

> I'm not aware of [type=checkbox] being a valid selector in CSS.
> It might be valid for userContent.css.

It should be a valid selector, as long as the element is <input>.
AFAICS input[attribute=value] is valid for any of the attributes
<input> can have.

> But since bill was using STYLE tags I assumed he was writing his
> shopping list as a webpage with CSS and not trying
> to customize all HTML on his wife's browser by editing
> userContent.css.

Me too.


bill

unread,
May 31, 2016, 6:45:24 AM5/31/16
to mozilla-sup...@lists.mozilla.org
On 5/30/2016 12:51 PM, »Q« wrote:
....
> You might be interested in Mozilla's documentation of it, which also
> covers -webkit-appearance,
> <https://developer.mozilla.org/docs/Web/CSS/-moz-appearance>.

Thanks for the link

bill


EE

unread,
May 31, 2016, 2:08:49 PM5/31/16
to mozilla-sup...@lists.mozilla.org
The code would be the same whether it is in a separate .css file or
inside style tags in HTML.

Mayayana

unread,
May 31, 2016, 7:22:28 PM5/31/16
to mozilla-sup...@lists.mozilla.org
| The code would be the same whether it is in a separate .css file or
| inside style tags in HTML.
|

I understand that, but I wondered about the
exotic syntax bill was using, and there seemed
to be some confusion about the whole thing.
(bill is posting code that seems to work fine, yet
he says it doesn't. Walts48 seems to think we're
talking about another issue. And you seem to
think we're talking about userContent.css. So I
thought maybe there needed to be a check to
make sure we're all on the same page, so to
speak. :)

Most people writing CSS for webpages wouldn't
do things like INPUT [type=checkbox] There are
cleaner, more widely supported methods and most
such elements will have a class, anyway. And there's
no role for "!important" in webpage coding, while
there is in userContent.css.

It seemed like a simple, harmless question starting
out but it seems to have become very complicated.


0 new messages