# accessibility


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Forced Color Adjust Utilities

Tailwind CSS provides utilities for opting in and out of forced colors.
These are particularly useful for Windows High Contrast Mode.

------------------------------------------------------------------------

### ForcedColorAdjust

``` python

def ForcedColorAdjust(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

```

*Forced color utility values*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
class ForcedColorAdjust(Enum):
    """Forced color utility values"""
    AUTO = "auto"
    NONE = "none"

# Create forced color adjust factory
forced_color_adjust = enums_to_simple_factory("forced-color-adjust", [ForcedColorAdjust], "Forced color adjust utilities for opting in and out of forced colors (e.g., Windows High Contrast Mode)") # The forced color adjust factory
```

</details>

------------------------------------------------------------------------

### test_accessibility_forced_color_adjust_examples

``` python

def test_accessibility_forced_color_adjust_examples(
    
):

```

*Test forced color adjust utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_accessibility_forced_color_adjust_examples(
):
    """Test forced color adjust utilities."""
    # Test forced color adjust utilities with dot notation
    assert str(forced_color_adjust.auto) == "forced-color-adjust-auto"
    assert str(forced_color_adjust.none) == "forced-color-adjust-none"

# Run the tests
test_accessibility_forced_color_adjust_examples()
```

</details>

## Screen Reader Utilities

Utilities for controlling visibility of elements for screen readers vs
visual display.

------------------------------------------------------------------------

### test_accessibility_screen_reader_examples

``` python

def test_accessibility_screen_reader_examples(
    
):

```

*Test screen reader utilities imported from layout module.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Screen reader utilities
sr_only = SingleValueFactory("sr-only", "Hide element visually but keep it available to screen readers")
not_sr_only = SingleValueFactory("not-sr-only", "Undo sr-only, making element visible again")
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_accessibility_screen_reader_examples(
):
    """Test screen reader utilities imported from layout module."""
    # Test screen reader utilities
    assert str(sr_only) == "sr-only"
    assert str(not_sr_only) == "not-sr-only"

# Run the tests
test_accessibility_screen_reader_examples()
```

</details>

## Practical Examples

Let’s see how to use these accessibility utilities in real FastHTML
components:

------------------------------------------------------------------------

### test_accessibility_fasthtml_examples

``` python

def test_accessibility_fasthtml_examples(
    
):

```

*Test accessibility utilities in practical FastHTML component examples.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_accessibility_fasthtml_examples(
):
    """Test accessibility utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Button, Span, Input, Label, Nav, A
    from cjm_fasthtml_tailwind.utilities.layout import position, top, left
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.borders import rounded, border, border_color
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.typography import font_size, text_color
    from cjm_fasthtml_tailwind.utilities.transitions_and_animation import animate
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, items, grid_display, flex_display
    from cjm_fasthtml_tailwind.core.base import combine_classes
    
    # Skip link for keyboard navigation
    skip_link = A(
        "Skip to main content",
        href="#main-content",
        cls=combine_classes(
            sr_only,
            not_sr_only.focus,
            position.absolute.focus,
            top(4).focus,
            left(4).focus,
            bg.white,
            p(2),
            rounded.full
        )
    )
    assert "sr-only" in skip_link.attrs['class']
    assert "focus:not-sr-only" in skip_link.attrs['class']
    
    # Form with screen reader only label
    form_field = Div(
        Label("Search", cls=str(sr_only), for_="search"),
        Input(
            type="search",
            id="search",
            placeholder="Search...",
            cls=combine_classes(w.full, p.x(4), p.y(2), border._1, rounded.full)
        )
    )
    assert form_field.children[0].attrs['class'] == "sr-only"
    
    # Icon button with screen reader text
    icon_button = Button(
        # Icon would go here (e.g., SVG)
        Span("Close dialog", cls=str(sr_only)),
        cls=combine_classes(p(2), rounded.full, bg.gray._100.hover),
        aria_label="Close dialog"
    )
    assert icon_button.children[0].attrs['class'] == "sr-only"
    
    # Navigation with forced color adjustments
    high_contrast_nav = Nav(
        A("Home", href="/", cls=combine_classes(forced_color_adjust.none, text_color.blue._600)),
        A("About", href="/about", cls=combine_classes(forced_color_adjust.none, text_color.blue._600)),
        A("Contact", href="/contact", cls=combine_classes(forced_color_adjust.none, text_color.blue._600)),
        cls=combine_classes(forced_color_adjust.auto, flex_display, gap(4))
    )
    assert high_contrast_nav.attrs['class'] == "forced-color-adjust-auto flex gap-4"
    assert "forced-color-adjust-none" in high_contrast_nav.children[0].attrs['class']
    
    # Loading spinner with screen reader text
    loading_spinner = Div(
        Div(cls=combine_classes(
            animate.spin,
            h(5),
            w(5),
            border._2,
            border_color.gray._900,
            rounded.full,
            border_color.t.transparent
        )),
        Span("Loading...", cls=str(sr_only)),
        cls=combine_classes(flex_display.inline, items.center)
    )
    assert loading_spinner.children[1].attrs['class'] == "sr-only"
    
    # Return all examples in a grid layout
    return Div(
        skip_link,
        form_field,
        icon_button,
        high_contrast_nav,
        loading_spinner,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_accessibility_fasthtml_examples()
```

</details>

``` html
<div class="grid gap-5">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white p-2 rounded-full">Skip to main content</a>  <div>
<label for-="search" class="sr-only">Search</label>    <input type="search" placeholder="Search..." id="search" class="w-full px-4 py-2 border-1 rounded-full" name="search">
  </div>
<button aria-label="Close dialog" class="p-2 rounded-full hover:bg-gray-100"><span class="sr-only">Close dialog</span></button>  <nav class="forced-color-adjust-auto flex gap-4">
<a href="/" class="forced-color-adjust-none text-blue-600">Home</a><a href="/about" class="forced-color-adjust-none text-blue-600">About</a><a href="/contact" class="forced-color-adjust-none text-blue-600">Contact</a>  </nav>
  <div class="inline-flex items-center">
    <div class="animate-spin h-5 w-5 border-2 border-gray-900 rounded-full border-t-transparent"></div>
<span class="sr-only">Loading...</span>  </div>
</div>
```

``` python
test_func = test_accessibility_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()
```

## Helper Functions

Convenient functions for common accessibility patterns:

------------------------------------------------------------------------

### visually_hidden

``` python

def visually_hidden(
    focusable:bool=False, # Whether the element should be visible when focused
)->str: # CSS classes for hiding element visually

```

*Hide an element visually but keep it available to screen readers.*

Args: focusable: If True, element becomes visible when focused (useful
for skip links)

Returns: CSS classes for visual hiding with optional focus visibility

------------------------------------------------------------------------

### high_contrast_safe

``` python

def high_contrast_safe(
    classes:str, # Additional CSS classes to combine
)->str: # CSS classes including forced color adjust

```

*Create classes that work well with high contrast mode.*

Args: \*classes: Additional CSS classes to include

Returns: Combined CSS classes with forced-color-adjust-auto

------------------------------------------------------------------------

### test_accessibility_helper_examples

``` python

def test_accessibility_helper_examples(
    
):

```

*Test helper functions for common accessibility patterns.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_accessibility_helper_examples(
):
    """Test helper functions for common accessibility patterns."""
    # Test visually_hidden helper
    assert visually_hidden() == "sr-only"
    assert visually_hidden(focusable=True) == "sr-only focus:not-sr-only"
    
    # Test high_contrast_safe helper
    assert high_contrast_safe() == "forced-color-adjust-auto"
    assert high_contrast_safe("bg-blue-500", "text-white") == "forced-color-adjust-auto bg-blue-500 text-white"

# Run the tests
test_accessibility_helper_examples()
```

</details>

## Export