Repository: gradio-app/gradio

Issue:
[blocks] optional labels for certain inputs
For most form elements, labels are required for accessibility reasons but for _outputs_ the case is less clear. They certainly need useful descriptions but since they are not interactive form elements, the accesibility considerations are more around readability.

We need  to figure out how/ where we can make certain labels optional without compromising end user usabilty or accessibility.

Continuation of #704.


Discussion:
@pngwn I was looking into this and it looks like labels needed to be provided for accessibility reasons, but they don't necessarily need to be _visible_:

> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users. The method used in this tutorial to hide an element visually but make it available for assistive technologies is explained in [Note on hiding element](https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements).

Source: https://www.w3.org/WAI/tutorials/forms/labels/

I think it would be nice if people can make the labels invisible because sometimes they clutter up the UI or look out of place. What do you think about adding a "hide_label" boolean parameter to each of the form elements? False by default, but can be set to True, which makes the label invisible.
Works for me, tailwind has a class for that: https://tailwindcss.com/docs/screen-readers

Resolving patch:
diff --git a/demo/blocks_outputs/run.py b/demo/blocks_outputs/run.py
--- a/demo/blocks_outputs/run.py
+++ b/demo/blocks_outputs/run.py
@@ -1,27 +1,35 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    txt = gr.Textbox(label="Small Textbox", lines=1)
-    txt = gr.Textbox(label="Large Textbox", lines=5)
-    num = gr.Number(label="Number")
-    check = gr.Checkbox(label="Checkbox")
-    check_g = gr.CheckboxGroup(label="Checkbox Group", choices=["One", "Two", "Three"])
-    radio = gr.Radio(label="Radio", choices=["One", "Two", "Three"])
-    drop = gr.Dropdown(label="Dropdown", choices=["One", "Two", "Three"])
-    slider = gr.Slider(label="Slider")
-    audio = gr.Audio()
-    video = gr.Video()
-    image = gr.Image()
-    ts = gr.Timeseries()
-    df = gr.Dataframe()
-    html = gr.HTML()
-    json = gr.JSON()
-    md = gr.Markdown()
-    label = gr.Label()
-    highlight = gr.HighlightedText()
-    # layout components are static only
-    # carousel doesn't work like other components
-    # carousel = gr.Carousel()
+    with gr.Column():
+        txt = gr.Textbox(label="Small Textbox", lines=1, show_label=False)
+        txt = gr.Textbox(label="Large Textbox", lines=5, show_label=False)
+        num = gr.Number(label="Number", show_label=False)
+        check = gr.Checkbox(label="Checkbox", show_label=False)
+        check_g = gr.CheckboxGroup(
+            label="Checkbox Group", choices=["One", "Two", "Three"], show_label=False
+        )
+        radio = gr.Radio(
+            label="Radio", choices=["One", "Two", "Three"], show_label=False
+        )
+        drop = gr.Dropdown(
+            label="Dropdown", choices=["One", "Two", "Three"], show_label=False
+        )
+        slider = gr.Slider(label="Slider", show_label=False)
+        audio = gr.Audio(show_label=False)
+        file = gr.File(show_label=False)
+        video = gr.Video(show_label=False)
+        image = gr.Image(show_label=False)
+        ts = gr.Timeseries(show_label=False)
+        df = gr.Dataframe(show_label=False)
+        html = gr.HTML(show_label=False)
+        json = gr.JSON(show_label=False)
+        md = gr.Markdown(show_label=False)
+        label = gr.Label(show_label=False)
+        highlight = gr.HighlightedText(show_label=False)
+        # layout components are static only
+        # carousel doesn't work like other components
+        # carousel = gr.Carousel()
 
 
 if __name__ == "__main__":


Test patch: